2. 科技
    3. VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件） 不同组件之间传值

    VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件） 不同组件之间传值

    科技2024-03-09  77

    VUE组件之间的通信

    父组件=>子组件（ props）

    ①定义父组件，父组件传递 number这个数值给子组件，如果传递的参数很多，推荐使用json数组{ }的形式 ②定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。

    假如传的是动态参数 比如 input输入的内容 v-model的形式 注意：传递的参数名称 支持驼峰命名，下图 描述不正确（1.0是不支持的）

    重点

    父子组件传值，数据是异步请求，有可能数据渲染时报错 原因：异步请求时，数据还没有获取到但是此时已经渲染节点了

    解决方案：可以在 父组件需要传递数据的节点加上 v-if = false，异步请求获取数据后，v-if = true

    子组件=>父组件（emit事件）

    不同组件之间传值

    通过eventBus（小项目少页面用eventBus，大项目多页面使用 vuex） ①定义一个新的vue实例专门用于传递数据，并导出

    ②定义传递的方法名和传输内容，点击事件或钩子函数触发eventBus.emit事件

    ③接收传递过来的数据 注意：enentBus是一个另一个新的Vue实例，区分两个this所代表得vue实例

    详解 父与子

    <body> <div id="app"> <father></father> </div> <template id="father"> <div> <p>这是父组件 -- {{pMsg}}</p> <hr> <!--3. 在调用子组件的时候，父组件需要将更改自身数据的方法引用传递给子组件--> <son :change="changeMsg"></son> </div> </template> <template id="son"> <div> <p>这是子组件 --- {{msg}} </p> <p><button @click="change(msg)">我要对父亲说的话！</button></p> </div> </template> </body> <script src="./base/vue.js"></script> <script> // function abc(callback){ // console.log(callback()) // } // abc(function(){ // return 3 // }) //父组件可以将自己方法传递给子组件来调用， //实现子组件更改父组件的数据 Vue.component("father",{ template:"#father", methods:{ changeMsg(msg){ //2.父组件需要写一个更改自身数据的方法 this.pMsg = msg } }, data(){ return { pMsg:"" //1.父组件定义一个自己的数据 } } }) Vue.component("son",{ template:"#son", props:["change"],//4.子组件需要接受父组件传递过来的方法引用 data(){ return { msg:"今天很舒服..." } } }) new Vue({ el:"#app" }) </script>

    二

    <body> <div id="app"> <father></father> </div> <template id="father"> <div> <p>这是父组件 -- {{pMsg}}</p> <hr> <!--3.需要在调用子组件的时候，给其绑定一个自定义事件--> <son @change="changeMsg"></son> </div> </template> <template id="son"> <div> <p>这是子组件 --- {{msg}} </p> <p><button @click="clickme" >我要对父亲说的话！</button></p> </div> </template> </body> <script src="./base/vue.js"></script> <script> //每一个组件或者实例都会有自定义事件，和触发事件的能力 //父组件给子组件绑定一个自定义事件，这个事件的处理程序却是父组件的一个方法 //当子组件触发这个事件的时候，相当于父组件的方法被执行了 Vue.component("father",{ template:"#father", methods:{ changeMsg(msg){ //2.写一个更改自身数据的方法 this.pMsg = msg } }, data(){ return { pMsg:"" //1.声明数据 } } }) Vue.component("son",{ template:"#son", // props:["change"], methods:{ clickme(){ //需要将 <son @change="父组件方法"> 自定义事件change进行触发 this.$emit("change",this.msg) } }, data(){ return { msg:"今天很舒服..." } }, }) new Vue({ el:"#app" }) </script>
    Processed: 0.010, SQL: 9