vue 组件通讯

这是我参与更文挑战的第3天，活动详情查看： 更文挑战”
在vue中 有两种实现组件通讯的方式我在这里先介绍第一种父传子事件

父传子

静态数据的渲染

我们这里先准备两个 .vue文件 a和 b

//a模板
<template>  
  <b  name='张三'/>
</template>

<script>
import b from './b.vue'
export default {
 name: a,
  components: {
    b
  }
</script>

首先我们在 a页面里面引入了b组件，并且正常的使用了b组件并且 给了一个name属性值为 张三（法外狂徒） 然后 我们打开 b组件

<template>
  <p> {{name}}</p>
</template>

<script>
export default {
  name: 'b',
  props: {
    name: {}
  }
}
</script>

这时候 我们如果，打开浏览器运行这段代码 就会发现浏览器页面 就会有一个 张三 的字符串
当然这样是远远不够的，在工作中，我相信老板让你在渲染 数据的时候肯定不会 就让你渲染这一丁点的数据，而且还是静态的数据，这么做一点意义都没有。
所以我们 进阶！ 数据的动态渲染

使用 v-on渲染动态数据

这里呢 我准备了一个数组保存的data里面， 接下来呢 只需要在html模板中 使用v-bing监听这个值 就可以了，也可以直接使用：这个符号直接监听 是不是很简单呢？？？

  data(){
    name: ['张三', '李四', '王五', '赵六']
  },

   <template>
       <b v-bing:name='name'/> <!--  等价于 <b :name='name'/>  这样看起来是不是更简洁一点 -->
   </template>

然后b组件中使用 v-for对这组数据进行渲染

    <template>
       <div> <span v-for="item in name" :key="item">{{item}}</span></div>
       <!-- 此时 页面上方 就可以显示出 **张三 李四 王五  赵六 **了 -->
    </template>

说了父传子 那肯定 也有子传父啦

字串符的方式

还是刚才的组件b 添加了一个点击事件

   <template>
       <b v-bing:name='name'/ @click="itemClick">
   </template>

  methods: {
    itemClick(){
       //$emit 里面接收两个参数 第一个为事件名 第二个为 要传递的内容 我这里为了简单就叫itemClick了
      this.$emit('itemClick')
    }
  

事件添加完了　怎么接受呢别急 只需要这样

   <template> 
       <b @itemClick="click" />
   </template>

  methods: {
    click(){
      console.log('子组件发生了点击');
    }

怎么样 是不是很简单啊 嘿嘿