vue的组件传值分为三种方式:父传子、子传父、非父子(同级)组件传值
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递
父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:
子组件的代码:
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里面的数据即可。
子组件代码:
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。
总结:
vue 中没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件
如果一定需要子对子传参,可以先从传到父组件,再传到子组件(相当于一个公共bus文件)
为了便于开发,vue 推出了一个状态管理工具 vuex,可以很方便实现组件之间的参数传递,推荐使用vuex。
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论