Vue 组件与组件间的交互 比眉伴天荒 2022-06-04 09:14 221阅读 0赞 **父组件 更改 子组件的 状态 ;子组件 更改 父组件的 状态** 一开始使用的是 JS 的引用类型进行子父组件进行交互,比如: 示例1: let str = { name:"张三" } console.log(str); str.name = "李四"; console.log(str); ![示例1配置结果图][1] 示例2: 父组件与子组件互通(使用 JS 引用类型,修改同一块内存地址,子父组件同时变化) <template> <!-- Details是子组件--> <Details :data="List" /> <div>{ { List.name}}</div> </template> <script> import Details from "./_details"; export default { components: { Details }, data() { return { List:{ name:"张三", arrayList:[1,2,3,4,5] } } } } </script> 子组件代码: <template> <div> <div>{ { data.List.name}}</div> <button @click="modify()">点我进行更改</button> </div> </template> <script> export default { props:[data], methods:{ modify(){ this.data.List.name = "李四"; } } } </script> 此时,父子组件都进行了更改,`name`显示的值均为 “李四” ,巧妙的使用 JS 引用类型, 为什么要贴出这两个较简单的代码,是想说明他的引用内存地址是同一块地址, 有时候就可以不使用vuex 进行使用,所以换在Vue中组件与组件简单版本可以进行交互! 下面介绍Vue的交互: #### **大纲介绍:** #### * 父组件传值给子组件 `props` * 父组件调用子组件的方法:(通过 `ref` 进行操作) * 子组件调用父组件(`$emit`、`$on`配合使用) -------------------- **1、父组件传值给子组件 (`props`)** 父组件代码编写:(将数组传递) <template> <!-- Details是子组件--> <Details :data="List" /> </template> <script> import Details from "./_details"; export default { components: { Details }, data() { return { List:[1,2,3,4,5] } } } </script> 子组件代码编写,通过`props`进行接收: <template> <ol> <li v-for="site in data"> { { site }} </li> </ol> </template> <script> export default { props:[data], } </script> PS:你会不会想如何传递父组件的方法到子组件,其实没有必要,直接使用下面介绍的3即可! **2、父组件调用子组件的方法:(通过 `ref` 进行操作)** 父组件代码: <!-- 父组件调用子组件 --> <template> <!-- Details是子组件--> <Details ref="profile" /> </template> <script> import Details from "./_details"; export default { components: { Details }, mounted() { this.$refs.profile.modal2 = true; } } </script> 子组件代码: <template> <div>{ { modal2}}</div> </template> <script> export default { data() { return { modal2: false } }, } </script> **3、子组件调用父组件(emit、on配合使用)** 描述:可以子组件更改父组件信息 子组件代码编写: <template> <button @click="ok"></button> </template> <script> export default { methods: { ok() { this.$emit('select-type',1);//向父组件派发事件,同时传递参数1,后面的参数的个数不限 }, }, mounted() {} } </script> 父组件代码编写: <template> <!-- Details是子组件--> <Details @select-type="show" /> </template> <script> import Details from "./_details"; export default { components: { Details }, methods: { show(){ alert("从子组件而来!") } } } </script> -------------------- [1]: /images/20220604/fd29f65cec5e4fb39710b3e73b612103.png
还没有评论,来说两句吧...