Vue 组件通信的多种方式（props、$ref、$emit、$attr、 $listeners）
prop和$ref之间的区别：
prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。
props 父组件传值子组件
父组件传值
//props示例(vue) <template> <div id="app"> <child :message="message"></child> 动态传递
<child message="传递的内容"></child> 静态传递
</div> </template> <script> import Child from "./Child"; export default { components: {Child}, name: "main-page", data() { return { message:{ type:1, name:'Admin', }, a:2, b:4, c:'lalal'+Math.random(), title:'', info:'我是来自父组件', msg:'默认' } }, created() {}, mounted(){}, methods: {} } </script> <style lang="scss" scoped> </style>
子组件接收父组件传值
<template> <div> {{message}} <!--<slot></slot>--> </div> </template> <script> export default { name: "child", props:['message'], data() { return { title:'' } }, mounted() {}, methods:{} } </script> <style lang="scss" scoped> </style>
父组件code引用子组件，通过props可以实现传值。可以传递string , number , object,表达式。对于子组件接受父组件props，可以直接使用props:[‘xxxx’]格式，为了更严谨，可以使用如下方式:
<script> export default { name: "child", // props:['message'], props:{ message:{ type:Object, default:function () { return {} } } }, data() { return { title:'' } }, mounted() { // this.$emit('showMessage','我是来自子组件') }, methods:{ } } </script>
$emit 子组件向父组件传值
props、ref 实现的都是父组件=>子组件之间的通信,而$emit则可实现子组件向父组件的通信， $emit应用的范围较为广泛。
子组件传值给父组件
template>
<div>
<input ref="myBtn"></input>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
info:'ref可以获取到元素哦~'
}
},
mounted() {
this.$emit('showMessage','我是来自子组件')
},
methods:{
}
}
</script>
父组件接收子组件传值
<template>
<div id="app">
<child @showMessage="showMessage"></child>
</div>
</template>
<script>
import Child from "./Child";
export default {
components: { Child},
name: "main-page",
data() {
return {
message:{
type:1,
name:'Admin',
},
fromchildinfo :'我是来自父组件',
msg:'默认'
}
},
created() {
},
mounted(){
},
methods: {
showMessage (data) {
this.fromchildinfo = data
},
}
}
</script>
$ref 的使用
说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取
注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods
添加ref属性
<div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho"></hello> <button @click="getref">获取H1元素</button>
</div>
获取注册过 ref 的所有组件或元素 methods: { getref() { // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件 console.log(this.$refs.h1Ele.innerText); this.$refs.h1ele.style.color = 'red';// 修改html样式 console.log(this.$refs.ho.msg);// 获取组件数据 console.log(this.$refs.ho.test);// 获取组件的方法 } }
<input ref="count" type="text" v-model="active.name" required name="name" value="">
这样在vue中我们可以使用$ref来获取dom节点，进行一些dom的操作
下面示例：控制input输入框的文字个数
new Vue({
el:'#app',
data:{
active:{'name':''}
},
watch:{
active:{
handler:function(){
var _this = this;
var _sum = 4; //字数限制为4个
_this.$refs.count.setAttribute("maxlength",_sum);
},
deep:true
}
},
})
使用在子组件上，可以用来获取子组件的属性值,假设子组件里面都有一个属性news
<!-- 父组件 --><div id="app">
<hdnews ref="hdnews"></hdnews>
<hdinfo ref="hdinfo"></hdinfo>
</div>
new Vue({
el:'#app',
mounted () {
console.log(this.$refs.hdnews.news); //获取子组件的值
console.log(this.$refs.hdinfo.news);
this.$refs.msg.getMessage('我是子组件一！') //调用子组件的方法 }
})
<!-- 子组件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
data(){
return{
news:'我是子组件的数据'
}
},
methods:{
getMessage(m){
this.message=m;
}
}
}
</script>
$attr、 $listeners
场景提出：A、B、C三个组件，需要实现A=>B=>C，进行传递(结构较为简单，无需使用vuex)。当然实现方式也可以$emit,一层一层传递下去，但这样代码显得冗余。在vue2.4之后，提出 $attr、 $listeners ,可以实现快速传递。
组件A code:
<template>
<div id="app">
<son :info="info" @getData="getData"></son>
<div>{{msg}}</div>
</div>
</template>
<script>
import Son from "./son";
export default {
components: {
Son,
Test,
Child},
name: "main-page",
data() {
return {
message:{
type:1,
name:'Admin',
},
a:2,
b:4,
c:'lalal'+Math.random(),
title:'',
info:'我是来自父组件',
msg:'默认'
}
},
created() {
},
mounted(){
},
methods: {
getData (val) {
this.msg = val
},
}
}
</script>
<style lang="scss" scoped>
#app {
width: 375px;
height: 100%;
}
</style>
b组件
<template>
<temp-son v-bind="$attrs" v-on="$listeners"></temp-son>
</template>
<script>
import TempSon from "./tempSon";
export default {
components: {TempSon},
name: "son",
props:[]
}
</script>
<style scoped>
</style>
c组件
<template>
<div>
<h1 class="btn">{{this.$attrs.info}}</h1>
</div>
</template>
<script>
export default {
name: "temp-son",
mounted() {
this.$emit('getData','我来自孙子组件')
}
}
</script>
<style scoped>
</style>
$attr、 $listeners 的TypeScript写法
A组件
<template>
<div class="home">
<img alt="Vue logo" src="@/assets/images/logo.png" />
<HelloWorld :info="info" @sunchangedata="getData" :msg="info" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
@Component({
components: {
HelloWorld
}
})
export default class Home extends Vue {
info = "你不是好人？";
getData(val:any){
this.info = val;
};
}
</script>
b组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>hello hello 我是来自子组件</p>
<Sun v-bind="$attrs" v-on="$listeners"></Sun>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Sun from "./sun.vue"; // @ is an alias to /src
@Component({
components:{
Sun
}
})
export default class HelloWorld extends Vue {
inheritAttrs = false;
@Prop() private msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
c组件
<template>
<div>
<p>sun组件</p>
<p>来自爷爷辈:{{ $attrs.info }}</p>
<button @click="$emit('sunchangedata','孙子说爷爷是好人')">点击更改爷爷辈信息</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
export default class Sun extends Vue {
}
</script>
<style>
</style>
