父传子:
子组件使用props接收父组件的值
父组件(test.vue):
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <template> 2 <!-- 父传子 --> 3 <div class="container"> 4 父组件:<input type="text" v-model="value"> 5 <!-- 引入子组件 --> 6 <com-b :zhangsan="value"></com-b> 7 </div> 8 </template> 9 10 <script> 11 import comB from '@/components/com-b' 12 export default { 13 data() { 14 return { 15 value:'' 16 } 17 }, 18 methods:{ 19 20 }, 21 components: { 22 comB 23 } 24 } 25 </script>
子组件(com-b.vue)在component文件夹中创建:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <template> 2 <div class="container"> 3 <!-- 这是子组件 --> 4 <div>{{zhangsan}}</div> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 data() { 11 return { 12 } 13 }, 14 props:['zhangsan'], 15 methods:{ 16 17 }, 18 } 19 </script>
子传父:
子传父需要事件触发
子组件(com-b.vue)在component文件夹中创建:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <template> 2 <div class="container"> 3 <!-- 这是子组件 --> 4 <!-- 点击按钮后将自组件的数据传给父组件 --> 5 {{msg}} 6 <button @click="ClickEvent()">点击自组件发送数据给父组件</button> 7 </div> 8 </template> 9 10 <script> 11 export default { 12 data() { 13 return { 14 msg:'我是自组件数据' 15 } 16 }, 17 methods:{ 18 //点击事件 19 ClickEvent(){ 20 //this.$emit('监听事件','要传递的值') 21 this.$emit('listenEvent',this.msg) 22 } 23 }, 24 } 25 </script>
父组件(test.vue):
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 子传父 --> 2 <template> 3 <div class="container"> 4 <!-- 引入自组件--> 5 <!-- 在父组件中使用传递的事件进行监听,回调函数fn --> 6 <!-- 事件可以自定义,回调函数也可以自定义 --> 7 <com-b @listenEvent="fn"></com-b> 8 {{value}} 9 </div> 10 </template> 11 12 <script> 13 import comB from '@/components/com-b' 14 export default { 15 data() { 16 return { 17 value:'' 18 } 19 }, 20 methods:{ 21 //函数接收一个参数,这个参数就是子组件传递的参数 22 fn(data){ 23 this.value=data 24 console.log(data) 25 } 26 }, 27 components: { 28 comB 29 } 30 }