1、父组件向子组件进行数据传递
<body>
<div id="app">
<p>{{a}}</p>
<br/>
<br/>
<son :parentval="a"></son>
</div>
<!-- 这个是一个子组件模板，定义了一个id，方便下面引用 -->
<template id="son">
<div>
<p>子主键的值：{{son_data}}</p>
<p>父主键传给子主键的值：{{parentval}}</p>
<button @click="dianwo">子组件按钮</button>
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义一个子组件对象
var son={
//引用标签
template:"#son",
//这个是数据对象，是子组件单独保存数据的，可以进行读写操作
data(){
return {
son_data:"我是子主键的值",
}
},
// props适用于进行组件之间传值用的，这里定义了一个parentval值，当父主键使用子组件时
//<son :parentval="a"></son> 例如这个，那么这个父组件a的值就可以传递给子主键，前面有冒号，所有这里的a是变量
props:{
parentval:""
},
methods:{
dianwo(){
console.log("我是子组件按钮！");
},
}
}
var vm = new Vue({
el: "#app",
//父组件引入子主键，才能使用
components:{
son,
},
data: {
a: "我是父主键的值",
},
})
</script>
2、子主键向父组件进行数据传递
<body>
<div id="app">
<p>{{a}}</p>
<br/>
<br/>
<!-- 这里父组件定义了一个parent_event事件，这个事件触发后执行parent_method方法 -->
<son :parentval="a" @parent_event="parent_method"></son>
</div>
<!-- 这个是一个子组件模板，定义了一个id，方便下面引用 -->
<template id="son">
<div>
<p>子主键的值：{{son_data}}</p>
<p>父主键传给子主键的值：{{parentval}}</p>
<!-- 子组件弄了一个click事件，执行dianwo方法 -->
<button @click="dianwo">子组件按钮</button>
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义一个子组件对象
var son={
//引用标签
template:"#son",
//这个是数据对象，是子组件单独保存数据的，可以进行读写操作
data(){
return {
son_data:"我是子主键的值",
}
},
// props适用于进行组件之间传值用的，这里定义了一个parentval值，当父主键使用子组件时
//<son :parentval="a"></son> 例如这个，那么这个父组件a的值就可以传递给子主键，前面有冒号，所有这里的a是变量
props:{
parentval:""
},
methods:{
dianwo(){
console.log("我是子组件按钮！");
//调用父组件的parent_event事件，并且传递参数，由于parent_event事件执行了parent_method方法，所以相当于这个子组件执行的是父组件的parent_method方法，并且传参
this.$emit("parent_event",123);
},
}
}
var vm = new Vue({
el: "#app",
//父组件引入子主键，才能使用
components:{
son,
},
data: {
a: "我是父主键的值",
},
methods:{
parent_method(val){
console.log("触发父组件方法，值已经改变,"+val);
if(!val){
this.a="触发父组件方法，值已经改变,子组件无传递参数";
}else{
this.a="触发父组件方法，值已经改变,子组件传递参数是:"+val;
}
}
}
})按钮点击之前：
按钮点击之后：