vue 父子组件与父子组件之间的通信
Posted cl94
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 父子组件与父子组件之间的通信相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <input type="text" v-model="msg"> <!-- :cmovies="movies":父传子之传值 --> <!-- @item-click="itemClick":接收子组件通过自定义事件传过来的值(子传父亲) --> <!-- ref="c" 组件标识,利于得到该子组件实例对象 --> <cpn ref="c" :cmovies="movies" @item-click="itemClick"></cpn> </div> <!-- 子组件模板 --> <template id="cpn"> <div> <h1>从父组件传过来的值:</h1> <ul> <li v-for="item in xmovie" @click="clickmovie(item)">{{item}}--点我传值至父组件>></li> </ul> </div> </template> <script> // 子组件 const cpn = { // 引用模板 template : "#cpn", // props 父传子之接收 // props: ["cmovies"], props : { cmovies :{ // 限定类型 type:Array, // 默认值(父组件未传值) default(){ // 这里为什么要用工厂函数?思考下,当限定类型为Object或Array时会报错 return [‘不能说的秘密‘,‘头文字D‘]; }, } }, data(){ return { // 将父组件传过来的值放到data里面,变成自己的属性(拓展性,不然不允许修改) xmovie : this.cmovies }; }, methods: { clickmovie (item){ console.log("子组件点击",item) // 将点击事件转成自定义事件传给父组件 // emit:发射 console.log("值通过自定义事件发射至父组件") this.$emit(‘item-click‘,item); } }, mounted(){ console.log("cpn子组件挂载完毕,根组件root对象:",this.$root) } } // 父组件,在这里父组件是vue实例 const app2 = new Vue({ el: "#app", data: { // 准备传给子组件的值 movies: [‘海王‘,‘海贼王‘], msg:"watch实时监测", }, /*注册组件*/ components:{ cpn, }, methods:{ itemClick(item){ console.log("父组件接收",item); } }, // watch:实时监测属性值的改变 watch:{ msg(newVal,oldVal){ console.log("watch实时监测更新数据,新数据:",newVal) } }, mounted (){ // this.$refs 所以的子组件 // this.$refs.c 子组件中 设置了ref属性值为c的内个组件 console.log("vue实例挂载完毕,有一个子组件,实例对象为:",this.$refs.c) } }) </script> </body> </html>
以上是关于vue 父子组件与父子组件之间的通信的主要内容,如果未能解决你的问题,请参考以下文章