[30天 Vue学好学满 DAY15] prop & emit-2

emit

监听子组件
父组件: 透过v-on监听子组件事件
子组件: 透过$emit传递事件名称

直接触发指令

子元件
於触发点定义事件名称do-emit

<button @click="$emit('do-emit')">Do Add</button>

父元件
监听事件do-emit，并执行指令

<HelloWorld @do-emit="count += 1"/>
// default: 0
count: {{count}}

起前端测试

透过方法、传值

子元件
调整触发方式为方法:doEmit

<button @click="doEmit">Do Add</button>

定义方法:实际执行emit点

doEmit: function () {
    this.$emit("do-emit", 2);
}

父元件

调整监听方式为方法

<HelloWorld @do-emit="addCount" />

定义方法:实际执行资料操作点

// val = 2
addCount: function (val) {
    this.count += val;
},

起前端测试

透过watcht触发emit & 传多值

大多数情况若值过多可改为传递物件

watch: {
    // emit multiple values
    watchVal: function (newValue, oldValue) {
      this.$emit("emit-name", newValue, oldValue);
    },
},

prop & emit 结合 v-model

父元件
HTML
定义输入框、绑定text

父元件输入框 : 
<input v-model="text" maxlength="11">
<br />
<HelloWorld :text="text" @emit-input="changeText" />

data

text: "",

定义监听方法

changeText: function(val) {
    this.text = val;
}

子元件

// @input : 变动时触发
<input v-model="text" @input="emitInput"/>

prop

props: {
    text: String
},

定义方法

emitInput: function () {
    this.$emit("emit-input", this.text);
},

emitInput: function() {
      console.log(this.text)
      this.$emit('emitInput',this.text)
    }

起前端测试

看似成功，但其实console有错误提醒如下

大致是说直接拿prop的值进行使用可能因为来源产生问题
-> 进行来源值监听，并用新参数接收

子元件输入框

<input v-model="newText" @input="emitInput"/>

定义新变数

newText:""

监听来源prop

watch: {
    text: function (newValue) {
      this.newText = newValue;
    },
},

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide