好好学习vue中 写了一些demo 希望自己能提升多一点 vue中实现父子组件之间的通信 相比我的上一篇非父子组件会简单些

父子组件之间的通信,其实看文档呢, 已经介绍很多了,这里主要是要demo来说明 ,用起来比较方便

在shop.vue中传送数据到子组件中,  直接上代码

template部分的:

<template>
    <div class="app">
        请输入你想说的: 
        <input type="text" v-model="msg">  <br>
        <!-- 下面是使用组件  并通过v-bind:message  来绑定父组件中msg  进行传值 -->
        <hello-world :message="msg"></hello-world>    
    </div>
    
</template>

JavaScript部分:

<script>
import HelloWorld from '@/components/HelloWorld'  //引入组件
    export default {
        data(){
            return{
                msg: ''
            }
        },
        components:{
            HelloWorld
        }
    }
</script>

接下来是子组件代码:

子组件接收的话 在props中可以写很多的, 传入的值可以是对象,或者数组啊 ,具体的我就介绍了 ,看文档就好哈

<template>
  <div class="hello">
      <div class="one">你说啥: {{message}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:{
    message: String
  },
  data () {
    return {
      
    }
  }
}

message在props中已经有了,就不需要在data中再次声明了,  刚刚开始我也犯错  哈哈   有问题可以加qq729455358   互相学习!!!