vue 组件通信-CSDN博客

父子

//  // 1//  <body>//     <div id="app">//       <!-- 1 父子通信 -->//       <list></list>//     </div>
//     <script src="./vue.js"></script>//     <script>//       const list = {//         name:'list',//         template: `
//           <ul>//             <item m='父组件传入的消息' ></item>//           </ul>//         `,//         data:function(){//           return {//             msg:'父组件的信息'//           }//         }//       };
//       const item = {//         name:'item',//         template: `//           <li> {{m}} </li>//         `,//         props: ["m"]//       };
//       const components_arr = [list,item];//       components_arr.forEach((com) => {
//         Vue.component(com.name,com)//       })//       var app = new Vue({//         el: "#app"//       });//     </script>//   </body>



// // 2// <body>//   <div id="app">//     <list :list-movies="movies"></list>//   </div>
//   <script src="./vue.js"></script>//   <script>//     /*//       list 相对于app 来说是子组件 name在list上写 :list-movies='movies' 在props中写 listMovies 是app作为父级向子组件list传值//       需要注意 名字的命名方式
//       item 相对于list来说是子组件
//     *///     const list = {//       name: "list",//       template: `//         <ul  >//           <item v-for='(mov,index) in listMovies' :key="index"  :nam='mov' :ind="index" ></item>//         </ul>//       `,//       props: ["listMovies"]//     };
//     const item = {//       name: "item",//       template: `//           <li  > {{ind}} - {{nam}} </li>//       `,
//       props: {//         ind: {//           type: Number//         },//         nam: {//           type: String,//           require: true,//           defaut: function() {//             return {};//           }//         },//         validator: function(value) {//           return value >= 0;//         }//       }//     };
//     const components_arr = [list, item];//     components_arr.forEach(com => {//       Vue.component(com.name, com);//     });
//     var app = new Vue({//       el: "#app",//       data: {//         movies: ["流浪地球", "疯狂外星人", "夏洛特烦恼", "E.T"]//       }//     });//   </script>// </body>
复制代码

子父通信

<body>    <div id="app">      <h3>$on $emit 初级使用</h3>      <button v-on:click='demoHandler("红色")' >红色</button>      <button v-on:click='demoHandler("蓝色")' >蓝色</button>      <button v-on:click='demoHandler("粉色")' >粉色</button>      <h3>$on $emit 组件传值使用</h3>      <child @two='third' ></child>    </div>
    <script src="./vue.js"></script>    <script>            /*        this.$on(event事件名,cb) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。        this.$emit(event事件名,arguments)   触发当前实例上的事件。附加参数都会传给监听器回调。        父子通信使用 props        子父之间通信使用 自定义函数 $on $emit 二者需要配合使用 单独不可以使用        $emit使用在methods函数中 $on使用在created中
        $on $emit 子父组件通信过程        在子组件的template的模板中写入 @click='one' 并且在one中$emit(two)提交给在子组件上写的 @two='third' 在父级组件的methods中的third函数总执行相应的操作
      */            const child = {        name:'child',        template:`           <button @click='one' >按 钮</button>        `,        methods: {          one(){            this.$emit('two')          }        },      }

      const cpmponents_arr = [child];      cpmponents_arr.forEach((com) => {        Vue.component(com.name,com)      })      var app = new Vue({        el: "#app",        data:{          a :5        },        created() {          console.log(this.a)          var that = this          this.$on('demo',function(color){            console.log(that.a)            console.log(`点击${color}按钮`)            that.a = 55            console.log(that.a)          })        },        methods: {          demoHandler(color){            console.log('方法中的函数')            this.$emit('demo',color)          },          third(){            console.log('one => two => third')          }        },      });    </script>  </body>复制代码

注意点

在HTML文件中需要将组件写入 dom 元素中
传值需要注意值的格式数组字符串
连接符与加号的区分
参数的命名格式
组件名定义与注册名的大小写与驼峰的区分
props 的参数可以认为是该组件的data

使用foreach进行注册操作 Vue.component（组件名，组件对象）

const com_arr = [parent, iptNum, showNum];com_arr.forEach(com => {  Vue.component(com.name, com);});
复制代码

组件中的data需要return 返回值
在计算属性中需要返回出最后的值