vue生命周期详解_vue组件传参

vue的组件传值分为三种方式：父传子、子传父、非父子（同级）组件传值

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递

父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

1、父传子

子组件的代码：

 1 <template>
 2     <div id="container">
 3         {{msg}}
 4     </div>
 5 </template>
 6 <script>
 7 export default {
 8   data() {
 9     return {};
10   },
11   props:{
12     msg: String
13   }
14 };
15 </script>
16 <style scoped>
17 #container{
18     color: red;
19     margin-top: 50px;
20 }
21 </style>

父组件的代码：

 1 <template>
 2     <div id="container">
 3         <input type="text" v-model="text" @change="dataChange">
 4         <Child :msg="text"></Child>
 5     </div>
 6 </template>
 7 <script>
 8 import Child from "@/components/Child";
 9 export default {
10   data() {
11     return {
12       text: "父组件的值"
13     };
14   },
15   methods: {
16     dataChange(data){
17         this.msg = data
18     }
19   },
20   components: {
21     Child
22   }
23 };
24 </script>
25 <style scoped>
26 </style>

总结：父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可。

2、子传父

子组件代码：

 1 <template>
 2     <div id="container">
 3         <input type="text" v-model="msg">
 4         <button @click="setData">传递到父组件</button>
 5     </div>
 6 </template>
 7 <script>
 8 export default {
 9   data() {
10     return {
11       msg: "传递给父组件的值"
12     };
13   },
14   methods: {
15     setData() {
16       this.$emit("getData", this.msg);
17     }
18   }
19 };
20 </script>
21 <style scoped>
22 #container {
23   color: red;
24   margin-top: 50px;
25 }
26 </style>

父组件代码：

 1 <template>
 2     <div id="container">
 3         <Child @getData="getData"></Child>
 4         <p>{{msg}}</p>
 5     </div>
 6 </template>
 7 <script>
 8 import Child from "@/components/Child";
 9 export default {
10   data() {
11     return {
12       msg: "父组件默认值"
13     };
14   },
15   methods: {
16     getData(data) {
17       this.msg = data;
18     }
19   },
20   components: {
21     Child
22   }
23 };
24 </script>
25 <style scoped>
26 </style>

总结：子传父的实现方式就是用了 this.$emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中用 this.$emit 来遍历 getData 事件，最后返回 this.msg。

总结：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

3、非父子

vue 中没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件

如果一定需要子对子传参，可以先从传到父组件，再传到子组件（相当于一个公共bus文件）

为了便于开发，vue 推出了一个状态管理工具 vuex，可以很方便实现组件之间的参数传递，推荐使用vuex。

今天的文章vue生命周期详解_vue组件传参分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/53387.html

vue生命周期详解_vue组件传参

1、父传子

2、子传父

3、非父子

相关推荐

发表回复