vue組件化通信之子向父傳值
vue組件化通信之兄弟組件傳值

父向子組件傳值

常用的方法主要有三種：props、$refs、$children 建議使用前兩種

使用props進行傳值

parent.vue

<template><div><childTest :msg='msg'></childTest></div> </template><script>import childTest from './childTest.vue'export default {components:{childTest},data() {return{msg: 'my vue'}}} </script>

childTest.vue

<template><div><h1>{{msg}}</h1></div> </template><script>export default {props: {msg: {type: String,default: ''//默認值}}} </script>

使用$refs進行傳值

parent.vue

<template><div><childTest ref='child'></childTest></div> </template><script>import childTest from './childTest.vue'export default {components:{childTest},mounted() {this.$refs.child.msg = 'my vue rfs'}} </script>

childTest.vue

<template><div><h1>{{msg}}</h1></div> </template><script>export default {data(){return{msg: ''}}} </script>

使用$children進行傳值

parent.vue

<template><div><childTest></childTest></div> </template><script>import childTest from './childTest.vue'export default {components: {childTest},mounted() {/* 當前實例的直接子組件。需要注意 $children 并不保證順序，也不是響應式的。如果 你發現自己正在嘗試使用 $children 來進行數據綁定，考慮使用一個數組配合 v-for 來生成子組件，并且使用 Array 作為真正的來源。*/this.$children[0].msg = 'my vue $children'}} </script>

childTest.vue

<template><div><h1>{{msg}}</h1></div> </template><script>export default {data(){return{msg: ''}}} </script> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue组件化通信之父向子传值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。