父组件向子组件传值
在父组件中使用子组件,并且向其传递数据,子组件同时调用父组件的方法
页面中:
<div id="app">
<ul>
<people-item
v-for="people in peoples"
:key="people.id"
:people="people"
@my-event="showContent"
></people-item>
</ul>
</div>
js代码:
//注册一个组件
Vue.component('people-item',{
props: ['people'],
template: '<li @click="getContent">{{ people.name }}</li>',
methods: {
getContent() {
this.$emit('my-event');
}
}
});
//实例化
var vm = new Vue({
el: '#app',
data: {
peoples: [
{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
}
]
},
methods: {
showContent() {
console.log('获取数据');
}
}
})
子组件向父组件传值
父组件使用子组件的数据和方法,主要通过$refs来调用,但是必须给组件通过ref来指定一个唯一标识。
<div id="app">
<p>子组件的数据:{{ info }}</p>
<todo-item ref="child"></todo-item>
</div>
//注册一个组件
Vue.component('todo-item',{
template: '<span>子组件</span>',
data() {
return {
info: 'hello'
}
},
methods: {
childFun(msg) {
console.log(msg);
}
}
});
//实例化
var vm = new Vue({
el: '#app',
data: {
msg:'父组件调用子组件方法',
info: ''
},
methods: {
getChildFun() {
this.info = this.$refs.child.info;
this.$refs.child.childFun(this.msg)
}
},
mounted() {
this.getChildFun();
}
})
作者:_我就是愛自由
原文:https://blog.csdn.net/u010359143/article/details/80734672