vue中父子组件交互 prop emit ref

最新推荐文章于 2024-01-20 10:32:24 发布

是谁眉眼

最新推荐文章于 2024-01-20 10:32:24 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/weixin_46370288/article/details/118636670

版权

传值问题

组件传值问题

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $e m i t 触发父组件的自定义事件。 v m .$ emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；

父组件给子组件用prop传值，子组件拿到值渲染子组件页面，子组件通过this.$emit(event,data)调用父组件方法,父组件在用子组件时候用@event接收被调用方法，拿到传进来的值放到data状态中用

//父组件

<template>
<div>
<h1>我是父组件！</h1>
<child></child>
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
}
</script>

//子组件

<template>
<h3>我是子组件！</h3>
</template>
<script>
</script>

这两部分的代码都很清晰明了，父组件通过import的方式导入子组件，并在components属性中注册，然后子组件就可以用标签的形式嵌进父组件了。运行father.vue后的效果是这样的：

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的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

父组件


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

2.通过$ref 实现通信
对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $r e f s 对象上。 1 . 如果 r e f 用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ ref可能获取到在子组件里定义的属性和方法。
2.
如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

1）如果ref用在子组件上

通过 $r e f 实现通信？下面我将上面 p r o p 实现的功能，用$ ref实现一遍：(拿到子组件的data和调用子组件的方法)

<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的实例指给 $r e f ，并且通过 . m s g . g e t M e s s a g e （）调用到子组件的 g e t M e s s a g e 方法，将参数传递给子组件。下面是 “ c o n s o l e . l o g (t h i s .$ refs.msg);”打印出来的内容，这可以让大家更加了解，究竟通过ref我们获取了什么：

2）如果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>

拿到

<div>111</div>

其实ref除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法

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

3.通过 $e m i t 实现通信上面两种示例主要都是父组件向子组件通信，而通过$ 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>
</template>
<script>
export default {
mounted: function () {
  this.$emit('getMessage', '我是父组件！')
}
}
</script>

父子组件写在一个模块中
父组件使用子组件的时候通过属性名传值，向下传的时候用什么属性名字，子组件在props中接收的时候就用什么名字接收，子中要接收父中传过来的多个值的时候，props数组中写多个属性名字接收，
子组件接收完成后要放在页面中{{属性名}}，要在methods中使用改变值，要先放在data函数返回的对象中，用this.属性名

<body>
    <div id="box" :style="{fontSize:fontsize+'em'}">
    父组件模板中使用子组件并且用属性的方式动态传递值
        <blog
            v-for="item in posts"
            :key="item.id"
            :post="item"
            :postfontsize = "fontsize"
        ></blog>
    </div>
    <script>
    Vue.component("blog",{
    // 父组件用什么属性名字传 子组件在props中用什么名字接收
        props:['post','postfontsize'],
        template:`
        <div>
            <h3 :style="{fontSize:singlefontsize+'em'}" >{{post.title}}</h3>
            <button @click="large">lage</button>
        </div>
        `,
        data(){
            return {
           // 接收回来的值 在用的时候直接加this用不用加props 放在子组件状态中
               singlefontsize:this.postfontsize
            }
        },
        methods:{
            large(){
         // 改变子组件状态中的值
                this.singlefontsize += 1
            }
        }
    })
    var vm = new Vue({
        el:"#box",
        data:{
            posts: [
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' }
            ],
            fontsize:1
        }
    })
    </script>    
</body>

是谁眉眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中父子组件交互 prop emit ref

传值问题组件传值问题1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 emit触发父组件的自定义事件。vm.emit 触发父组件的自定义事件。vm.emit触发父组件的自定义事件。vm.emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；父组件给子组件用prop传值，子组件拿到值渲染子组件页面，子组件通过this.$emit(event,data)调用父组件方法,父组件在用子组件时候用@ev
复制链接

扫一扫