父组件 ---> 子组件
属性props
在子组件调用时给子组件写入属性，在子组件内部用props注册后，会添加到子组件的实例上
在子组件中不能直接修改props的传入值
只能时父组件传给子组件，不能‘隔代‘
父组件：HelloWord
<template>
<div class="hello">
<!-- 使用自组件 -->
<child :message="msg"> </child>
</div>
</template>
<script>
import child from './Children1.vue'
/* eslint-disable */
export default {
name: "HelloWorld",
components: {child},
data() {
return {
msg: "这是一个父组件的信息",
}
},
};
</script>
子组件:child
<template>
<div id="child">
<a href="www.baidu.com/">{{message}}</a>
</div>
</template>
<script type="text/javascript">
/* eslint-disable */
export default {
// name: "child",
props: ['message'],
};
</script>
效果：
特性$attrs
解决了props ‘隔代‘ 传值时反复注册props的弊端
组件是在调用时写入属性
// 子组件：child
<template>
<div id="child">
<p>{{$attrs.message}}</p>
</div>
</template>
<script type="text/javascript">
/* eslint-disable */
export default {}
</script>
效果：
$refs
通过调用子组件函数，然后进行处理
// 父组件: HelloWorld
<template>
<div class="hello">
<!-- 使用自组件 -->
<!-- <child1 :message="msg"></child1>
<child2></child2> -->
<child3 ref="child3"></child3>
</div>
</template>
<script>
import child1 from './Child1.vue'
import child2 from './Child2.vue'
import child3 from './Child3.vue'
/* eslint-disable */
export default {
name: "HelloWorld",
components: {child1, child2, child3},
data() {
return {
msg: "这是一个父组件的信息, 但是我要显示在子组件上",
}
},
mounted() {
this.$refs['child3'].fun(this.msg);
console.log(this.$refs.child3);
console.log(this.$refs.child3.msg);
}
};
</script>
// 子组件：Child
<template>
<div>{{childMsg}}</div>
</template>
<script>
/* eslint-disable */
export default {
data: function() {
return {
msg: '我是子组件的msg',
childMsg: '',
}
},
methods: {
fun(str) {
console.log(str);
this.childMsg = str;
}
},
}
</script>
效果：
$children
通过调用子组件函数，然后进行处理
// 父组件: HelloWorld
<template>
<div class="hello">
<!-- 使用自组件 -->
<!-- <child1 :message="msg"></child1>
<child2></child2> -->
<child3 ref="child3"></child3>
</div>
</template>
<script>
import child1 from './Child1.vue'
import child2 from './Child2.vue'
import child3 from './Child3.vue'
/* eslint-disable */
export default {
name: "HelloWorld",
components: {child1, child2, child3},
data() {
return {
msg: "这是一个父组件的信息, 但是我要显示在子组件上",
}
},
mounted() {
this.$children[0].fun(this.msg);
console.log(this.$children[0]);
// console.log(this.$refs.child3);
// console.log(this.$refs.child3.msg);
}
};
</script>
// 子组件：Child
<template>
<div>{{childMsg}}</div>
</template>
<script>
/* eslint-disable */
export default {
data: function() {
return {
msg: '我是子组件的msg',
childMsg: '',
}
},
methods: {
fun(str) {
this.childMsg = str;
}
},
}
</script>
子组件 ---> 父组件
通过自定义事件$emit
// 父组件: HelloWorld
<template>
<div class="hello">
<!-- 使用自组件 -->
<!-- <child1 :message="msg"></child1>
<child2></child2>-->
<!-- <child3 ref="child3"></child3> -->
<child4 @getmsg="fun"></child4>
<p>{{childMsg}}</p>
</div>
</template>
<script>
/* eslint-disable */
import child1 from "./Child1.vue";
import child2 from "./Child2.vue";
import child3 from "./Child3.vue";
import child4 from "./Child4.vue";
export default {
name: "HelloWorld",
components: { child1, child2, child3, child4 },
data() {
return {
msg: "这是一个父组件的信息, 但是我要显示在子组件上",
childMsg: '',
};
},
mounted() {
// this.$children[0].fun(this.msg);
// console.log(this.$children[0]);
// console.log(this.$refs.child3);
// console.log(this.$refs.child3.msg);
},
methods: {
fun: function(s) {
this.childMsg = s;
}
}
};
</script>
// 子组件：Child
<template>
<div>{{childMsg}}</div>
</template>
<script>
/* eslint-disable */
export default {
data: function() {
return {
msg: "我是子组件的msg",
childMsg: ""
};
},
mounted: function() {
console.log(this.$emit("getmsg", this.msg));
// this.childMsg = this.$emit("getmsg", this.msg);
}
};
</script>
效果：
兄弟组件通过共同父辈组件搭桥
$parent
$root
$children
$emit
其他方法和$emit类似，仅写一个例子
// common
<template>
<div class="c">
<h3>事件链传递数据</h3>
<appA :msg-from-b="msgFromB" @msg-a-change="aSay"></appA>
<appB :msg-from-a="msgFromA" @msg-b-change="bSay"></appB>
</div>
</template>
<script>
/* eslint-disable */
import A from './A'
import B from './B'
export default {
data: function() {
return {
msgFromA: 'A 还没说话',
msgFromB: 'B 还没说话',
}
},
methods: {
aSay: function(msg) {
this.msgFromA = msg;
},
bSay: function(msg) {
this.msgFromB = msg;
},
},
components: {
appA: A,
appB: B,
}
}
</script>
// A
<template>
<div>
<h3>A模块</h3>
<p>B说： {{msgFromB}}</p>
<button @click="aSay">A 把自己的信息传给B</button>
</div>
</template>
<script>
/* eslint-disable */
export default {
data: function() {
return {
msg: "我是A"
};
},
methods: {
aSay: function() {
this.$emit("msg-a-change", this.msg);
}
},
props: ["msgFromB"]
};
</script>
// B
<template>
<div>
<h3>B模块</h3>
<p>A说： {{msgFromA}}</p>
<button @click="bSay">B 把自己的信息传给B</button>
</div>
</template>
<script>
/* eslint-disable */
export default {
data: function() {
return {
msg: '我是B',
}
},
methods: {
bSay: function() {
this.$emit('msg-b-change', this.msg);
}
},
props: ['msgFromA'],
}
</script>
效果：
隔代传递
$attrs
如上文
provide/inject
上辈组件provide
子孙组件inject
// 组件长辈/子辈顺序： App--->HelloWorld--->child4,所示例子中是App中provide,在child4中inject
// App
<template>
<div id="app">
<img src="./assets/logo.png" />
<!-- <router-view/> -->
<Hello></Hello>
<Com></Com>
</div>
</template>
<script>
/* eslint-disable */
import Hello from "./components/HelloWorld";
import Com from "./components/brother/Common";
export default {
name: "app",
provide() {
return {
rootMsg: '根信息',
}
},
components: {
Hello,
Com
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
// 子孙组件inject
<template>
<div>
{{childMsg}}
<p>{{rootMsg}}</p>
</div>
</template>
<script>
/* eslint-disable */
export default {
data: function() {
return {
msg: "我是子组件的msg",
childMsg: "",
child4Msg: 'child4Msg......',
};
},
inject: ['rootMsg'],
};
</script>
效果：
https://note.youdao.com/web/#/file/WEB1e40c3ee5241312ee63dc8c180aa2973/note/WEBd925acc08e1b9a82e5803c641345b4da/
vue组件之间的通信
你对生活笑，生活不会对你哭。