VUE之父子组件传值

2021-05-18 09:04:30 阅读：159 来源： 互联网

标签：function VUE parent 组件 data event 传值给父

vue之父子组件传值

组件可以分为父组件和子组件(当然还有后代组件和根组件等),以父子组件举例,实现父组件的数据传递给子组件,子组件的值传递给父组件

父组件传值子组件

使用 props 属性
子组件通过一个动态的属性设置，将父组件的值保存到自身上（下面的例子中设置 :content=“item”，这个:content即为动态属性）
然后在子组件中设置props属性，将动态属性填写到props数组中（这里类似于声明一个变量，上面的 :content="item"类似于变量赋值）
接下来就可以在子组件中使用父组件的数据了，上代码 ↓ ↓ ↓

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父组件传值子组件</title>
</head>

<body>
    <div id="app">
        <component-a v-for="item in msg" :content="item"></component-a>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        Vue.component('component-a', {
            props: ['content'],//content的值即为item的值
            template: "<div>子组件内容{{content}}</div>",
            data: function() {
                return {
                    message: '子组件内容'
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                msg: ['1', '2', '3', '4', '5']
            }
        });
    </script>
</body>
</html>

子组件传值父组件

子组件传值给父组件，需要使用 $emit(‘event’，data)
如果需要将子组件的数据传回给父组件，可以调用 $emit() 方法
该方法第一个参数为子组件需要监听的事件名（即如果该事件被触发，意为需要传递数据给父组件），第二个参数为传递的数据
当上述监听事件被触发，父组件的的事件也将被触发，从而传递数据给父组件（例如 @event=“response” 这里 event 是子组件监听的事件，event后面的事件为父组件的事件）

注意：

虽然传递了一个数据给父组件，但是不需要在 @event="response"后面加上()括号和参数，而父组件内部却需要写参数，具体见下面的例子： ↓ ↓ ↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件传值父组件</title>
</head>

<body>
    <div id="app">
        <component-a @event="response"></component-a>//注意：响应的事件后面不加括号和参数（会报错）
        <h2>子组件传递给父组件的内容：{{target}}</h2>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        Vue.component('component-a', {
            template: `<ul><li v-for="item in message" @click="select(item)">子组件内容{{item}}</li></ul>`,
            data: function() {
                return {
                    message: ['a', 'b', 'c', 'd', 'e']
                }
            },
            methods: {
                select: function(data) {
                    this.$emit('event', data);//event——监听的事件名，data——传递的数据
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                target: ""
            },
            methods: {
                response: function(data) {//注意：这里需要加上参数
                    this.target = data;
                }
            }
        });
    </script>
</body>
</html>

$parent 和 $root

通过 $parent 可以在子组件中直接获取父组件的实例，直接操作父组件的事件或者数据
通过 $root 可以在后代组件中获取到根组件（最顶部的一层父级），用法和 $parent基本一致

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件通信</title>
</head>

<body>
    <div id="app">
        <!-- <button @click="handleRef">点击生成列表</button> -->
        <component-a @event="response"></component-a>
        <h2>子组件传递给父组件的内容：{{target}}</h2>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        Vue.component('component-a', {
            template: `<ul><li v-for="item in message" @click="select(item)">子组件内容{{item}}</li></ul>`,
            data: function() {
                return {
                    message: ['a', 'b', 'c', 'd', 'e']
                }
            },
            methods: {
                select: function(data) {
                    // this.$emit('event', data);//使用 $emit
                    this.$parent.response(data);//使用 $parent操作父组件的事件
                    this.$parent.target = data;//使用 $parent直接操作父组件数据
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                msg: ['1', '2', '3', '4', '5'],
                target: ""
            },
            methods: {
                response: function(data) {
                    this.target = data;
                }
            }
        });
    </script>
</body>

</html>

标签：function,VUE,parent,组件,data,event,传值,给父
来源： https://blog.csdn.net/weixin_45774485/article/details/116972718

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE之父子组件传值

vue之父子组件传值

父组件传值子组件

子组件传值父组件

注意：

$parent 和 $root