深入探讨Vue.js组件和组件通信

2020-06-16 06:33:10易采站长站整理

<my-profile></my-profile>
<form v-on:submit="add" v-on:submit.prevent>
<input type="text" v-model="input"/>
<input type="submit" value='add' />
</form>
...
</div>

 Vue.component(“me-profile”, Profile); 属于全局注册,如果只是在某一个页面内使用,可以通过局部注册的方式:


var vm = new Vue({
el: "#todo",
components: {
"my-profile": Profile
},
...
}

 其中因为我们的 Vue 实例是绑定在 todo 元素上的,所以如果把 my-profile 放在这个元素外面是无效的,只有放在这个里面才会被 Vue 的这个实例引导初始化。

注意事项:

Vue 构造函数可以传的参数基本都可以用在 Vue.extend 上,但是对 el 和 data 两个参数需要注意,为了避免不同实例间共享同一个对象,总是要通过 function 返回一个新的对象比较靠谱:


var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})

 因为参数都一样,其实他们俩就是同一个东西,不过一个是组件,一个是用来引导Vue启动的。

模板注意事项

因为 Vue 就是原生的DOM,所以有些自定义标签可能不符合DOM标准,比如想在 table 中自定义一个 tr,如果直接插入 my-component 不符合规范,所以应该这样写:


<table>
<tr is="my-component"></tr>
</table>

 Props 传递数据

在 Vue 中每个组件都是独立的,不能也不应该直接访问父类的data。所以我们通过 props 来向子组件传递数据,是不是和 React 的方式很像?

不同于 React,在 Vue 中子组件需要先声明自己的 props 才行:


var Profile = Vue.extend({
props: ["name"],
template: `
<h2>{{name}}'s Todo List</h2>
<h4>{{name}} is a good girl</h4>
`
});

 然后我们可以在使用 Profile 的时候这样传递参数:
<my-profile name=’Lily’></my-profile>

 这种是通过字面量传递参数,所以传递的值一定是字符串。还有一种方式是动态传参,通过 v-bind 来传递参数,可以双向绑定数据或者传非字符串参数:
<my-profile v-bind:name=‘input’></my-profile>

 v-bind 如果是一个字符串,则是绑定父组件的data中对应的字段,比如上面就是双向绑定了 input 的值。如果是一个数字则就是绑定了一个数字。

Vue 还可以显式指定单向还是双向的数据绑定: