vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子:
<div id="app2"> <child message="hello!"></child> </div> ... Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' }) new Vue({ el:"#app2" });
以上定义了一个全局组件child,在app2的父级作用域中使用时,child组件定义了一个message属性,这样父组件在使用子组件的地方直接通过给child的message属性赋值即可将该值传递到子组件内部,从而输出模板内容:hello!,这里的“hello!”字符串是固定的,如果我们想传入的是app2作用域中的动态数值可以使用如下方式:
<div id="app2"> <child v-bind:message="parentMsg"></child> <input v-model="parentMsg"> </div> ... Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' }) new Vue({ el:"#app2", data:{ parentMsg:"" } });
这样的话,子组件中的message值完全来自于父组件中的data.parentMsg,父组件的数据操作直接更新到子组件中。
再来看下events up的实例:
<div id="counter-event-example"> <p>{{ total }}</p> <!-- 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件,也就是这里的$.emit("increment")事件 --> <button-counter v-on:increment2total="incrementTotal"></button-counter> <button-counter v-on:increment2total="incrementTotal"></button-counter> </div> ... Vue.component('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1 this.$emit('increment2total',{"admin":"############"}) } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function (value) { alert(JSON.stringify(value)); this.total += 1 } } })
子组件模板中声明click事件,调用自身methods方法increment,increment里面通过$emit形式抛出一个事件到对应的子组件:on那里,查找到对应的父组件调用方法为incrementTotal,则直接调用该方法并传递参数。
关于vue.js后续一些学习心得体会均会在此处分享,一步步慢慢学吧。。。