首页 > 其他分享> > VUE之父子组件传值

VUE之父子组件传值

2021-05-18 09:04:30 作者：互联网

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