Vue组件通信

vue的组件通信

*1.父传子
首先要在components文件夹中创建一个子组件，然后在父组件的script中使用import引入一下子组件，然后再在components中注册一下，就可以当作普通的标签一样在模板中使用了，如果要传值的话，再在子组件的标签上自定义一个属性，然后将要传输的变量挂载上去

父组件中的代码

<template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :fa-msg="msg"></son>
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>

子组件中的代码

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子组件接收到内容：{{ faMsg }}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子组件',
     }
   },
   props:['faMsg'],//接收psMsg值
 }
</script>

子组件通过props来进行接收父组件传递过来的数据
第一种方法，直接用数组来接收

	props:["arr"]

第二种方法，指定数据类型，不一样会发出警告

props: {
    childCom: String
}

第三种方式，给了一个默认值

props: {
    arr: {
        type: String,
        default: 'aaa' 
    }
}

2.子传父
vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据
给子组件标签添加自定义事件，接收子组件传递过来的参数

<template>
  <div>
      <table class="table">
          <tr>
              <th>id</th>
              <th>名字</th>
              <th>年龄</th>
              <th>操作</th>
          </tr>
          <son v-bind:list="list" @del="del"/>
      </table>
  </div>
</template>

<script>
import '@/assets/bootstrap/bootstrap.css'
import son from './tabson1'
export default {
  name: '',
  components:{
      son
  },
  data() {
    return {
        list:[
            {
                id:1,
                name:'张三',
                age:18,
            },
            {
                id:2,
                name:'张三',
                age:18,
            },
        ]
    };
  },
  mounted() {},
  methods: {
      del(index){
          this.list.splice(index,1)
      }
  },
  computed: {},
  watch: {},
};
</script>

子组件通过$emit触发父组件上的自定义事件，发送参数

<template>
  <tbody>
    <tr v-for="(i,index) in list" :key="index">
      <td>{{i.id}}</td>
      <td>{{i.name}}</td>
      <td>{{i.age}}</td>
      <td>
        <button @click="remove(index)">删除</button>
      </td>
    </tr>
  </tbody>
</template>

<script>
export default {
  name: "",
  props:['list'],
  data() {
    return {};
  },
  mounted() {},
  methods: {
      remove(index){
          this.$emit('del',index)
      }
  },
  computed: {},
  watch: {}
};
</script>

3.Vuex
我们将数据存放在vuex中所有的组件都可以直接使用：

  state: {
    cartlist: []
  },

如果想要获取vuex中的某一组数据的话，在组件中可以直接用this.$store.state.xxx就行，比如

 mounted() {
    this.cartlist = this.$store.state.cartlist;
  },

在vuex中定义的方法

 del(state,index){
      state.cartlist.splice(index,1)
    }

使用组件中使用this.$store.commit()来调用vuex中的方法：

 methods: {
    del(index) {
      this.$store.commit("del", index);
    },
  },