一、父传子

第一步:给子组件动态绑定属性

<template id="one">
    <div>
        <h2>我是父组件</h2>
        <my-two v-bind="{msg:msg,age:age}"></my-two>
    </div>
</template>

第二步:在子组件中使用props接收数据

props: {
    msg: {
        type: String,
        default: '你好啊',
    },
    age: {
        type: Number,
        validator(value) {
            if (value > 60) {
                alert('年龄太大了,回家去吧');
                return false;
            }
            return true;
        },
    },
}

1.父传子props的使用

props接收数据时有两种方法:

一种为数组(简单指定),一种为对象(高级指定)

对象有四个可选项,作用为下:

type:接收绑定值的类型

required:是否必需接收绑定值,给boolean值

default:不接收绑定值时的默认值

validator:对接收的绑定值进行验证并进行返回

data() {
    return {
        msg: 'welcome',
        name: 'tom',
        age: 12,
        user: {
            id: 9527,
            username: '唐伯虎',
        },
    };
}

props: {
    message: {
        type: String,
    },
    name: {
        type: String,
        required: true,
    },
    age: {
        type: Number,
        default: 18,
        validator: function (value) {
            // 参数value为传递的数据
            if (value < 0 || value > 100) {
                alert('年龄无效');
                return false;
            }
            return true;
        },
    },
    user: {
        type: Object,
        //如果传递值为对象,default应为回调函数并进行返回,若不为对象则传递普通值即可
        default() {
            return {
                id: 1001,
                username: '秋香',
            };
        },
    },
},

二、子传父

注意:

子传父本身是没有响应式的

使用$set无法实现

wacth监听和独立响应式对象可以实现视图更新,实现响应式

this.$emit('执行的自定义事件', 带的值);

1.被动传递数据

第一步:在子组件模板中创建一个按钮绑定点击事件,点击之后执行Vue实例方法$emit

注意:Vue实例方法$emit具有主动性

<button @click="send"></button>

<script>
send() {
    this.$emit('on-pwd', this.msg);
}
</script>

第二步:给子组件绑定自定义事件,在父组件中创建自定义事件回调函数(用于接收数据)

//子组件
<my-two @get="get"></my-two>

<script>
get(value) {
   this.info = value;
}
</script>

2.主动传递数据

第一步:在mounted生命周期钩子函数中使用Vue实例方法$emit

注意:Vue实例方法$emit具有主动性

// 页面挂着完成之后执行
mounted() {
    this.$emit('on-pwd', this.msg);
}

第二步:给子组件绑定自定义事件,在父组件创建子组件绑定的事件回调函数(用于父组件接收数据)

//子组件
<my-two @get="get"></my-two>

<script>
get(value) {
   this.info = value;
}
</script>

3.实现数据响应式

3.1使用wacth方法

第一步:创建wacth选项进行数据的监听

//子组件
<my-two @get="get"></my-two>

<script>
watch: {
    msg(newValue) {
        //触发新的事件,传递新的数据
        this.$emit('upget', newValue);
    },
}
</script>

第二步:重新进行绑定自定义事件(用于接收新的数据)

//子组件
<my-two @get="get" @upget="upget"></my-two>

<script>
get(value) {
   this.msg = value;
},
//接收新的数据
upget(newValue) {
    this.msg = newValue;
}
</script>

三、根组件传后代

第一步:提供要向后代组件传递的数据

provide: {
    hobby: 'game',
    weight: 150,
},

第二步:在需要数据的后代组件使用inject选项来接收数据

inject: ['hobby']

四、非父子之间传递(中央事件总线传递)

通过中央事件总线来传递数据,它属于所有组件都能访问的事件对象

这个事件对象叫做$root,也就是根实例的对象

1.主动传递数据(自动传递数据)

步骤:

1.在页面挂载完成之后执行$root自定义事件并带值

2.在页面挂载之前监听$root自定义事件,同时接收数据并赋值

<body>
    <div id="app">
        <my-one></my-one>
        <hr />
        <my-two></my-two>
        <hr />
        <my-three></my-three>
    </div>

    <template id="one">
        <div>
            <h2>A组件:{{msg}}</h2>
        </div>
    </template>

    <template id="two">
        <div>
            <h2>B组件:{{msg2}}</h2>
        </div>
    </template>

    <template id="three">
        <div>
            <h2>C组件:{{msg}} {{msg2}}</h2>
        </div>
    </template>
</body>

<script>
Vue.component('my-one', {
    template: '#one',
    data() {
        return {
            msg: 'hello',
        };
    },
    //在页面挂载完成之后执行给自定义事件传数据
    mounted() {
        this.$root.$emit('data-a', this.msg);
    },
});

Vue.component('my-two', {
    template: '#two',
    data() {
        return {
            msg2: 'world',
        };
    },
    //在页面挂载完成之后执行给自定义事件并带值
    mounted() {
        this.$root.$emit('data-b', this.msg2);
    },
});

Vue.component('my-three', {
    template: '#three',
    data() {
        return {
            msg: null,
            msg2: null,
        };
    },
    // 在页面挂载之前进行监听
    beforeMount() {
        //监听自定义事件,同时接收数据并赋值
        this.$root.$on('data-a', (msg) => {
            this.msg = msg;
        });
        this.$root.$on('data-b', (msg2) => {
            this.msg2 = msg2;
        });
    },
});
</script>
最后修改:2020 年 08 月 31 日 12 : 20 AM