子组件向父组件传值
在子组件页面触发事件$emit
<template>
<el-button @click="returnNews">回传给父组件</el-button>
<el-input v-model="returnMsg"></el-input>
</template>
<script>
export default {
data() {
return {
returnMsg:'',
}
},
methods:{
returnNews:function(){
this.$emit("sendMsg",this.returnMsg);
},
},
}
</script>
//通过button按钮的点击事件，将控件中输入的值绑定到returnMsg上
//this.$emit("sendMsg",this.returnMsg);sendMsg是父组件需要的方法名，this.returnMsg是传递的值
在父组件中在组件标签中调用v-on事件监听
<template>
<span>子组件回传来的值：{{news}}</span>
<Childen1 v-on:sendMsg="returnMsg"> </Childen1>
</template>
<script>
import Childen1 from './Childen1';
export default {
data() {
return {
news:'',
}
},
components: {
'Childen1': Childen1,
},
methods:{
returnMsg:function(val){
this.news=val;
}
},
}
</script>
父组件向子组件传值
//PartView1 表示子组件
//new_name是子组件中用来接受父组件传值的参数名
<div class="item">
<PartView1 :new_name="name"></PartView1>
</div>
data() {
return {
name:'hello',//给name赋值为hello
}
},
在子组件中接受传来的参数
props: {
new_name:'',
},
