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);
},
},