06-Vue组件之间的传值
qgyh 2020-11-04 11:41:57 2020-11-04 131 0
父组件向子组件传值
我们可以这样理解:Vue实例就是一个父组件,而我们自定义的组件(包括全局组件、私有组件)就是子组件。
【重点】需要注意的是,子组件不能直接使用父组件中的数据。父组件可以通过props
属性向子组件传值。
父组件向子组件传值的代码举例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue2.5.16.js"></script></head><body> <div id="app"> <!-- 第三步:父组件在引用子组件的时候, 通过 属性绑定(v-bind:)的形式, --> <!-- 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 --> <component1 v-bind:parent-msg="msg"></component1> </div> <!-- 定义子组件的模板 --> <template id="myTemplate"> <!-- 第二步:在子组件的模板中,使用props中的属性 --> <h2 @click="change">我是子组件。我想使用父组件中的数据parentMsg: {{ parentMsg }}</h2> </template> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '父组件中的数据123' }, methods: {}, components: { // 子组件默认无法访问到 父组件中的 data 中的数据 和 methods 中的方法 component1: { //将子组件的名称定义为 component1 template: '#myTemplate', data() { // 注意: 子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的,比如: 子组件通过 Ajax ,请求回来的数据,都可以放到 data 身上; // data 上的数据,都是可读可写的 return { title: '子组件私有的数据 title', content: '子组件私有的数据 content' } }, // 注意: 组件中的 所有 props 中的数据,都是通过 父组件 传递给子组件的 // props 中的数据,都是只读的,无法重新赋值 props: ['parentMsg'], // 第一步:把父组件传递过来的 parentMsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据 directives: {}, filters: {}, components: {}, methods: { change() { // 下面这行会报错,因为子组件不要直接修改父组件中的data数据 // this.parentMsg = '被修改了' } } } } }); </script></body></html>
效果如下:
代码截图如下:
父组件给子组件传值的步骤:
根据上方截图,我们可以总结出父组件给子组件传值的步骤如下。
(1)在子组件的props
属性中声明父亲传递过来的数据
(2)定义子组件的模板时,使用props中的属性
(3)父组件在引用子组件时,进行属性绑定。
子组件中,data中的数据和props中的数据的区别:
- 子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的,比如: 子组件通过 Ajax ,请求回来的数据,都可以放到 data 身上。props 中的数据,都是通过 父组件 传递给子组件的。
- data中的数据是可读可写的;props中的属性只是可读的,无法重新赋值,重新赋值会报错(也就是说,子组件不要直接去修改父组件中的数据)。
父组件将方法传递给子组件
父组件通过事件绑定机制,将父组件的方法传递给子组件
代码举例:
```html
暂无评论