继续创造,加快成长!这是我参与「日新方案 10 月更文挑战」的第9天,点击查看活动概况

Vue的组件化思维,其中组件之间数据的传递很重要,我感觉很有必要把它总结一下。好了,开始正题: props是用于数据之间的传递(父组件向子组件),ref也能够用于数据之间的传递(ref用在子组件上,指向的是组件实例,能够了解为对子组件的索引,经过ref或许获取到在子组件里界说的特点和办法。),$emit是用于事情之间的传递(子组件触发父组件里面的办法)。

1.props是用于父组件向子组件传递数据信息

props是单向绑定的,即只能父组件向子组件传递,不能反向。

    <!-- 父组件 -->
    <template>
     <div>
      <h1>我是父组件!</h1>
      <child message="我是子组件一!"></child>
      <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
      <child v-bind:message="a+b"></child>
      <!-- 用一个变量进行动态赋值。-->
      <child v-bind:message="msg"></child>
     </div>
    </template>
    <script>
    import child from '../components/child.vue'
    export default {
     components: {child},
     data() {
      return {
       a:'我是子组件二!',
       b:112233,
       msg: '我是子组件三!'+ Math.random()
      }
     }
    }
    </script>
    <!-- 子组件 -->
    <template>
     <h3>{{message}}</h3>
    </template>
    <script>
     export default {
      props: ['message']
     }
    </script>

Vue中的父子组件之间的数据传递之props、$ref和$emit

能够看到子组件中用props来接受从父组件传过来的message的数据信息。从父组件传递过来的数据没有约束,能够是字符串,表达式,对象等。

2.经过ref 完成通讯

关于ref官方的解说是:ref 是被用来给元素或子组件注册引证信息的。引证信息将会注册在父组件的 refs 对象上。 那应该怎么了解?看看下面的解说:

  1. 假如ref用在子组件上,指向的是组件实例,能够了解为对子组件的索引,经过ref或许获取到在子组件里界说的特点和办法。
  2. 假如ref在一般的 DOM 元素上运用,引证指向的就是 DOM 元素,经过$ref或许获取到该DOM 的特点集合,轻松访问到DOM元素,作用与JQ选择器相似。

那怎么经过ref 完成通讯?下面就将上面prop完成的功用,用ref完成一遍:

 <!-- 父组件 -->
    <template>
      <div>
        <h1>我是父组件!</h1>
        <child ref="msg"></child>
      </div>
    </template>
    <script>
      import child from '../components/child.vue'
      export default {
        components: {child},
        mounted: function () {
          console.log( this.$refs.msg);
          this.$refs.msg.getMessage('我是子组件一!')
        }
      }
    </script>
    <!-- 子组件 -->
    <template>
     <h3>{{message}}</h3>
    </template>
    <script>
     export default {
      data(){
       return{
        message:''
       }
      },
      methods:{
       getMessage(m){
        this.message=m;
       }
      }
     }
    </script>

Vue中的父子组件之间的数据传递之props、$ref和$emit

下面再看一下ref是怎么获取dom元素的
代码如下:

<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>
<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
    }
  }
};
</script>

打印出来的元素如下:

Vue中的父子组件之间的数据传递之props、$ref和$emit

这里再补充一点就是,prop和$ref之间的差异:

  1. prop 着重于数据的传递,它并不能调用子组件里的特点和办法。像创建文章组件时,自界说标题和内容这样的运用场景,最适合运用prop。
  2. ref 着重于索引,首要用来调用子组件里的特点和办法,其实并不拿手数据传递。而且ref用在dom元素的时分,能使到选择器的作用,这个功用比作为索引更常有用到。

3.经过emit 完成通讯

上面两种示例首要都是父组件向子组件通讯,而经过emit 实 现 子 组 件 向 父 组 件 通 信 。 对 于 emit 完成子组件向父组件通讯。 关于emit完成子组件向父组件通讯。关于emit官网上也是解说得很朦胧,也能够这样了解:

vm.$emit( event, arg )

$emit 绑定一个自界说事情event,当这个这个语句被执行到的时分,就会将参数arg传递给父组件,父组件经过@event监听并接纳参数。

 <!-- 父组件 -->
    <template>
     <div>
      <h1>{{title}}</h1>
      <child @getMessage="showMsg"></child>
     </div>
    </template>
    <script>
     import child from '../components/child.vue'
     export default {
      components: {child},
      data(){
       return{
        title:''
       }
      },
      methods:{
       showMsg(title){
        this.title=title;
       }
     }
     }
    </script>
    <!-- 子组件 -->
    <template>
     <h3>我是子组件!</h3>
     <button @click=“submit”>点击</button>
    </template>
    <script>
     export default {
       methods:{
         submit(){
           this.$emit('getMessage', '我是父组件!')
         }
       }
     }
    </script>

Vue中的父子组件之间的数据传递之props、$ref和$emit

当然: vm.emit( event, […arg] ) emit是能够传递多个参数的
例如:
父组件中

 <el-button type="primary" size="mini" @getMessage="showMsg">提交</el-button>
    methods:{
       showMsg(item1, item2, item3){
        this.title=item1;
        console.log(item2);
        console.log(item3);
       }
     }

子组件中

 submit() {
    this.$emit('getMessage', item1, item2, item3)
  }

这是我之前宣布在其他平台上的原创文章。

不到长城非好汉!

我们下篇文章再见!

参考文献:

www.jianshu.com/p/91416e11f…