Vue 组件通信的多种方式(props、$ref、$emit、$attr、 $listeners)

vue

prop和$ref之间的区别:

prop 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。

$ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。

props   父组件传值子组件

父组件传值

//props示例(vue)

<template>

<div >

<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 >

<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 >

  <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 >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 >

<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>

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>

以上是 Vue 组件通信的多种方式(props、$ref、$emit、$attr、 $listeners) 的全部内容, 来源链接: utcz.com/z/380259.html

回到顶部