父子
// // 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 返回值
- 在计算属性中需要返回出最后的值