父与子：
父级调用子元素，通过子元素的属性来传入数据
Vue.component('自定义组件名称'，组件的内容（对象的形式）)
子级内部通过props来接收对应的数据
子与父
注意：vue中数据默认是单向流动，只能父到子直接传递，但是子到父不能直接修改。
原因：因为父级的数据不一定只是某个子级在使用，也许还会有其他的子级在使用
如果子级内部可以随意修改父级的数据，很容易就会出现数据混乱
解决：如果子级想修改数据，那么需要子级去通知父级，父级接收到这个通知后，再修改
通知方法:(自定义)事件机制（监听）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>组件之间不能相互使用数据，组件与组件之间需要相互传参</h3>
<h4>1.声明一个全局的 Event var Event = new Vue();</h4>
<h4>2.Event.$emit(自定义事件名,参数1,参数2...) 发送参数</h4>
<h4>3.Event.$on(自定义事件名,()=>{}) 接收参数</h4>
<div id="app">
<conone></conone>
<hr />
<contwo></contwo>
<hr />
<conthree></conthree>
<hr />
</div>
<template id="cone">
<div>
<h1>我是第一个子组件</h1>
<button @click="sena">传参</button>
</div>
</template>
<template id="ctwo">
<div>
<h1>我是第二个子组件</h1>
<button @click="senb">组件三传参</button>
</div>
</template>
<template id="cthree">
<div>
<h1>我是第三个子组件</h1>
<p>{{ma}}</p>
<p>{{mb}}</p>
</div>
</template>
</body>
<script type="text/javascript">
var Event = new Vue();
let conone = {
data() {
return {
msga: "1111",
};
},
methods: {
sena() {
// Event.$emit(自定义事件名，参数1，参数2...) 发送参数
// Event.$on(自定义事件名,()=>{}) 接收参数
Event.$emit("geta", this.msga);
},
},
template: "#cone",
};
let contwo = {
data() {
return {
msgb: "222",
};
},
methods: {
senb() {
Event.$emit("getb", this.msgb);
},
},
template: "#ctwo",
};
let conthree = {
data() {
return {
ma: "",
mb: "",
};
},
mounted() {
Event.$on("geta", (a) => {
//console.log(a);
this.ma = a;
});
Event.$on("getb", (b) => {
//console.log(b);
this.mb = b;
});
},
methods: {},
template: "#cthree",
};
new Vue({
el: "#app",
data: {
msg: "",
},
methods: {},
components: {
conone,
contwo,
conthree,
},
});
</script>
</html>
网友评论