Vue组件动态(异步)传值
Vue组件动态(异步)传值
父组件:
<template><div><input type="text" v-model="inpMessage"><button @click="handleClick">点击传给子组件</button><children :message="clickData" /> //message为子组件props接收的值,clickData为父组件要传的值</div>
</template><script>import children from './page/children'export default {name: "index",components:{children},data(){return{inpMessage:'',clickData:''}},methods:{handleClick(){//赋值this.clickData = this.inpMessage},}}
</script>
子组件:
<template><div><input type="text" v-model="childrenMessage"></div>
</template><script>export default {name: "children",props:{message:String},data(){return{childrenMessage:''}},created(){this.childrenMessage=this.message},//这里用watch方法来监听父组件传过来的值,来实现实时更新watch:{message(val){ //message即为父组件的值,val参数为值this.childrenMessage = val //将父组件的值赋给childrenMessage 子组件的值}}}
</script>