vue - 组件通信

Vue.js

本章内容：

• 组件通信
  • 父组件通信子组件
  • 子组件通信父组件
  • 子组件修改父组件传递的数据
  • 兄弟组件通信
  • props详解

组件通信

​ 组件之间的数据传递 (传值)

父组件通信子组件

​ 子组件不能修改父组件传递的数据, 需要勒令父组件更改数据。

<div id="app">
    
    <child :msg="message">child>
div>

Vue.component("child", {
    props: ["msg"], // 在【子组件】中，通过【props属性】来接收【自定义属性】，之后即可使用。
    template: `
		

        	
{{msg}}
        
	`
})
new Vue({
    el: "#app",
    data: {
        message: "Heelo Vuejs"
    }
})

子组件通信父组件

1. 子组件是不能自动向父组件传值，需要手动触发事件，通过事件向父组件传递数据。
2. 子组件通过【this.$emit(‘自定义事件名’,‘子组件数据’)】可以自定义一个事件，并将子组件数据，通过这个事件发送给【在父组件中】的【子组件】。
3. 子组件接收到的【自定义事件】通过和【父组件的事件】进行绑定，并将【子组件数据】传递给【父组件事件】。
4. 在【父组件事件】中，将【子组件数据】赋值给【父组件属性】。

<div id="app">
    
    <child @send-data="getSendData">child>
    <h3>子组件发送的数据为： {{message}}h3>
div>

Vue.component("child", {
    data() {
        return {
            message: "向父组件通信"
        }
    },
    methods: {
        send() {
            // 由事件驱动，向自身派发一个事件，并传递一些数据。
            this.$emit("send-data", this.message, true, 7788);
        }
    },
    template: `
        

            向父组件发送数据
        
    `
})
new Vue({
    el: "#app",
    data: {
        message: ''
    },
    methods: {
        getSendData(data, flag, num) { // 在父组件中监听子组件派发的事件。
            this.message = data;
            console.log(data, flag, num);
        }
    }
})

子组件修改父组件传递的数据

1. 父组件传递给子组件的数据，在子组件内修改传递的数据Vue是不允许的。
2. 应当使用【this.$emit(“自定义事件名称”)】，派发一个事件由父组件进行修改，在传递给子组件。
3. 如果传递的是一个数组，在子组件内push新的数据，vue不会报错，只要不改变数据类型即可，但是不推荐这样做。
4. 谁传递的数据就由谁去改动，不能由其他子项改变数据。

<div id="app">
    
    <child :n="num" @send="plus()">child>
div>

const Child = {
    props: {
        n: {
            type: Number,   // 指明我所期盼的数据类型
            required: true // 是否必传
        }
    },
    methods: {
        add() {
            this.$emit('send'); // 派发一个事件。
        }
    },
    template: `
        

            添加	
            {{n}}
        
    `
}
new Vue({
    el: "#app",
    data: {
        num: 1
    },
    methods: {
        plus() { // 与子组件派发的事件进行绑定
            this.num ++;
        }
    },
    components: {
        Child
    }
})

兄弟组件通信

<div id="app">
    <sibling1>sibling1>
    <sibling2>sibling2>
div>

let vm = new Vue(); // 兄弟之间通信需要借助一个全局Vue实例，用这个变量来派发自定义事件及数据。
const Sibling2 = {
    data() { // 组件`data`必须时一个函数，并且`return`一个对象。
        return {
            message: ''
        }
    },
    template: `
        

            
我是兄弟二，兄弟一发送来的数据为： {{message}}
        
    `,
    mounted() {
        vm.$on("send", (val) => { // 使用$on来监听vm实例上的自定义事件。
            this.message = val; // val为我们传递的数据。
        })
    }
}
const Sibling1 = {
    data() {
        return {
            message: "Hello Vuejs"
        }
    },
    methods: {
        send() {
            // 通过事件触发，向vm实例派发一个自定义事件并携带参数。
            vm.$emit("send", this.message);
        }
    },
    template: `
        

            
我是兄弟一，我要向兄弟二传递数据
            向兄弟传递数据
            

        
    `
}
new Vue({
    el: "#app",
    components: {
        Sibling1,
        Sibling2
    }
})

props详解

new Vue({
    el: "#app",
    data: {
        message: "Hello Vuejs",
        iphone: 0 || [1, 2, 3]
    },
    components: {
        child: {
            props: ["msg"], // 不推荐这种写法，推荐下面的写法。
            props: {
                msg:{
                    type: String,   // 指明我所期盼的数据类型，如果不是指定的类型，会报错。
                    default: "没有传进来数据" // 如果父组件没有传递数据，会给到一个default的默认值。
                },
                num: {
                    type: [Number, Array], // 指明多种期盼的数据类型 。
                    required: true // 是否必传, required和default不能共存, 只能选
                }
            },
            template: `
				
msg --- {{msg}} 
 num --- {{num}}
	
			`
        }
    },
    // Vue实例内声明的`template`会覆盖掉Vue接管的范围，所以需要重新声明一下`div#app`。
    template: ` 
        

            
        
    `
})

---