linux 自定义指令 JAVA学习 dart cakephp silverlight sed stream Modernizr jquery循环遍历 jq去除空格 bootstrap图表 kb转mb idea中svn的使用 matlab网页版 mysql 选择数据库 python随机整数 python传递参数 java编程基础 java数据库 java继承关键字 java语言 java中接口的定义 java实现栈 linux装机 beatedit 路由器有没有辐射 无法打开搜索页 16进制编辑器 god2iso 自动答题软件 rpm卸载命令 wmiprvse是什么进程 bootskin unlocker下载 igfxtray 键盘灯怎么关 ps蒙版抠图 top命令详解 cad打散
当前位置: 首页 > 学习教程  > 编程语言

vue之父子组件间通信项目方法总结(props,$ref,$emit,.sync)

2020/12/28 19:30:03 文章标签:

1,通过prop实现通信(父—>子) 子组件的props选项能够接收来自父组件数据。 没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向。 而传递的方式也分为两种: &#xf…

1,通过prop实现通信(父—>子)

子组件的props选项能够接收来自父组件数据。
没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向。
而传递的方式也分为两种:

(1)静态传递

子组件通过props选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据了。

 <!-- 父组件 -->

<template>
  <div>
    <h1>我是父组件!</h1>
    <child message="我是子组件一!"></child>  //通过自定义属性传递数据
  </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
  components: {Child},
}
</script>
 <!-- 子组件 -->

<template>
  <h3>{{message}}</h3>
</template>
<script>
  export default {
    props: ['message']   //声明一个自定义的属性
  }
</script>

(2)动态传值

我们已经知道了可以像上面那样给 props 传入一个静态的值,但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性,传递去过的就不是静态的字符串了,它可以是一个表达式、布尔值、对象等等任何类型的值。

父组件:通过标签上定义传值<child v-bind:message="a+b"></child>
子组件:通过props方法接受数据props: ['message']

 <!-- 父组件 -->

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

在这里插入图片描述

通过$ref 实现通信(父—>子)

如果ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过$ref可能获取到在子组件里定义的属性和方法。
如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通过$ref可能获取到该DOM 的属性集合,轻松访问到DOM元素,作用与JQ选择器类似。
 <!-- 父组件 -->

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

从上面的代码我们可以发现,通过ref=‘msg’可以将子组件child的实例指给$ref,并且通过.msg.getMessage()调用到子组件的getMessage方法,将参数传递给子组件。
在这里插入图片描述

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

  • prop 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
  • $ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。

3,通过$emit 实现通信(子—>父)

上面两种示例主要都是父组件向子组件通信,而通过$emit 实现子组件向父组件通信。
子组件:通过 $emit方法传参this. $emit('自定义事件名称', '要传的参数')
父组件:用$on()来监听子组件<child @getMessage="showMsg"></child> methods:{ showMsg(title){ this.title=title; } }

<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>
</template>
<script>
  export default {
    mounted: function () {
      this.$emit('getMessage', '我是父组件!')
    }
  }
</script>

在这里插入图片描述

4,.sync修饰符

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。
或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态。例如:

//父组件给子组件传入一个函数
 <MyFooter :age="age" @setAge="(res)=> age = res">
 </MyFooter>
 //子组件通过调用这个函数来实现修改父组件的状态。
 mounted () {
      console.log(this.$emit('setAge',1234567));
 }

这时子组件触发了父组件的修改函数使父组件的age修改成了1234567

这种情况比较常见切写法比较复杂。于是我们引出主角 .sync

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }

这里注意我们的事件名称被换成了update:age
update:是被固定的也就是vue为我们约定好的名称部分
age是我们要修改的状态的名称,是我们手动配置的,与传入的状态名字对应起来


本文链接: http://www.dtmao.cc/news_show_550264.shtml

附件下载

上一篇:HMM

下一篇:跑msckf程序闪退问题

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?