Vue入门和基础———Vue父子组件之间数据的传递

最新推荐文章于 2022-11-26 17:48:46 发布

丶念远

最新推荐文章于 2022-11-26 17:48:46 发布

阅读量130

点赞数

文章标签： vue基础

本文链接：https://blog.csdn.net/m0_37202330/article/details/84398708

版权

Vue入门和基础（六）

父子组件之间数据的传递：
在HTML中使用元素，会有一些属性，还可以绑定事件，当然，在一个组件中定义并使用了其他组件，就会利用子组件的属性和事件和父组件进行数据交互;

那么子组件和父组件之间是如何进行数据的传递的呢？

1：父子组件之间通过props

2：子父组件之间通过$emit

属性Props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../js/vue.min.js"></script>
<body>
<div id="app">
    <myself my-message="hello,everybody"></myself>
</div>

</body>
<script>
    Vue.component('myself',{
        template: '<h1>父组件给我传的值：{{myMessage}}</h1>',
        props:['myMessage'],
        data(){
            return {
                message: 'helloWorld'
            }
        }
    });
      var app = new Vue({
          el: '#app',
          data: {
          }
      });
</script>
</html>

Vue组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

$emit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../js/vue.min.js"></script>
<body>
<div id="app">
    <myself v-on:myclick="onClick"></myself>
</div>
</body>

<script>
    Vue.component('myself', {
        template: '<div> <button type="button" @click="childClick">点击我触发自定义事件</button> </div>',
        methods: {
            childClick:function() {
                this.$emit('myclick', '这是我传出去的数据')
            }
        }
    })
    new Vue({
        el: '#app',
        methods: {
            onClick:function(message) {
                console.log(message)
            }
        }
    })
</script>
</html>

子组件在自己的方法中将自定义事件以及需要发出的数据通过以下代码发送出去

this.$emit('myclick', '这是我传出去的数据')

第一个参数是自定义事件的名字
后面的参数是依次想要发送出去的数据

父组件利用v-on为事件绑定处理器

<myself v-on:myclick="onClick"></myself>

丶念远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门和基础———Vue父子组件之间数据的传递

Vue入门和基础（六）
复制链接

扫一扫

Vue入门和基础———Vue父子组件之间数据的传递

Vue入门和基础（六）

属性Props

$emit

“相关推荐”对你有帮助么？