父组件与子组件通信
父传子 - 上到下
子传父 - 下到上
- 在组件的标签上面以自定义属性名 + 数据的形式(),进行数据的绑定;
- 在组件内部通过props进行接收(props:[‘list’]),就可以直接在template中进行数据的使用了
- 在子组件上通过this下面的$emit(第一个参数是自定义事件,第二个参数要传递的数据)
- 在子组件的组件标签上通过@自定义事件名,等于回调函数的形式进行数据的处理
下面直接上代码吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父->子&&子->父</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<day-parent :list="list1"></day-parent>
</div>
</body>
<script>
父组件
Vue.component('day-parent', {
props: ["list"],
data() {
return {
childval: ""
}
},
//定义模板
template:
`<div>
<input type="text" :value="childval">
<day-children :childList="list" @child="getchild"/>
</div>`,
//在组件的标签上面以自定义属性名 + 数据的形式(),进行数据的绑定;
methods: {
getchild(val) {
console.log(`我是子组件传过来的数据${val}`)
this.childval = val //-->把子组件拿到的参数赋值给data定义的值并绑定到input
}
},
});
子组件
Vue.component('day-children', {
props: ['childList'],
//定义模板
template:
`<ul>
<li @click="change(item)" v-for="item in childList">{{item}}</li>
</ul>`,
methods: {
change(val) {
console.log(val)
this.$emit('child', val)//--->子组件传参给到父组件,$emit(第一个参数是自定义事件,第二个参数要传递的数据)
}
},
});
const vm = new Vue({
el: '#app',//--->挂载点
data: {
list1: ["React", "Angular", "Vue"],//--->子组件渲染的数据
}
});
</script>
</html>
持续更新中…