父子组件之间的通信 · 常用笔记

# 父子组件之间的通信 # 一般开发流程 - 比如在一个页面中我们从服务器请求到了很多的数据 - 其中一部分数据并非使我们整个页面的大组件来展示的而是需要下面的子组件进行展示 - 这个时候并不会让子组件再次发送一个网络强求而是直接让大组件（父组件将数据传递给小组件（子组件） - 因为向服务器发送网路请求对服务器压力是很大的 # 如何进行父子组件间的通信呢？官方解释： - 通过props向子组件传递数据 props是properties（属性）单词的缩写 - 通过事件向父组件发送消息（emit） ![](https://img.kancloud.cn/6f/d9/6fd97968594a31f253877017476ec33e_459x202.png) 父组件通过----->props----->子组件子组件---->$emit 自定义事件--->传递给父组件 ``` <pre class="calibre13">``` 父组件id是 app 子组件id是cpn 在父组件中传值给子组件 <cpn v-bind:cmovies = "movies"></cpn> 子组件定义属性props:['cmovies'] cmovies里面就有了数据第一种方式：父组件定义数据movies 子组件进行绑定即可传值到子组件第二种方式：在子组件中定义props属性：props:['cmessage'] 在父组件中定义数据 message 在子组件模板中 增加data(){ return {}} 子模板中使用 {{cmessage}}也可以拿到父组建的值 ``` ``` # 父传子 ``` <pre class="calibre13">``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">  <cpn :cmovies="movies" :cmessage="message"></cpn> </div> <template id="cpn"> <div> {{cmovies}} {{cmessage}} </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script> const cpn = { //创建子组件 template: '#cpn', //props:['cmovies','cmessage'], //接收父组件传值数组形式 //下面演示对象传递的形式 props:{ cmessage: { type: String, default: 'aaaaa' }, cmovies: { type: Array, default() { return [] } } } } const app = new Vue({ //父组件 el: '#app', data: { message: "测试数据", movies: ['哪吒','海贼王','斗破苍穹','斗罗大陆'] }, components: { //注册组件 cpn } }) </script> </body> </html> ``` ``` # 子-->父通信 ``` <pre class="calibre13">``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <div id="app">  <cpn @itemclick="cpnClick"></cpn> </div>  <template id="cpn"> <div> <button v-for="item in infos" @click="btnClick(item)">{{item.name}}</button> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 1 子组件 const cpn = { template: '#cpn', data(){ return{ infos: [ {id: '1',name: '热门推荐' }, {id: '2',name: '手机数码' }, {id: '3',name: '家用家电' }, {id: '4',name: '电脑办公' } ] } }, methods: { btnClick(item) { //console.log(item) //itemClick 发射事件的名称 item 是发送的参数 this.$emit('itemclick',item) //自定义事件 } } } // 2父组件 const app = new Vue({ el: '#app', data: { message: "测试数据" }, methods: { cpnClick(item) { console.log('父组件接收-->'+item.name) } }, //注册子组件 components: { cpn } }) </script> </body> </html> ``` ``` # 子组件访问父组件的内容 ``` <pre class="calibre14">``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} <cpn></cpn> </div> <template id="cpn"> <div> <h1>这是子组件标题</h1> <p>这是子组件内容</p> <button @click="btnClick">获取父组件对象</button> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: "测试数据" }, components: { cpn:{ template:'#cpn', methods: { btnClick() { console.log(this); //console.log(this.$parent.message); console.log(this.$root.message); //建议采用这种方式因为上面那种方式如果嵌套多个组件如果找不到name值可能会报错 } } } } }) </script> </body> </html> ``` ```