vue组件之间的传值（代码详解）

组件传参：

组件实例的作用域是孤立的。这意味着不能在子组件的模块中直接引用父组件的数据，必须使用特定的方法才能实现组件之间的数据传递。

如在父组件中向子组件传值：

<headerBar message = “hello” />

在子组件中需要使用props获取到父组件的传值：

props: [‘message’]

子组件向父组件传递数据，如当input发生变化时，向子组件传name值：

<input v-model = “name” @change = “setName” />
    methods: {
        setName: function(){
            this.$emit(‘transferName’, this.name)
        }
    }

在父组件中获取数据：

    methods: {
        getName: function(msg){
            this.user = msg
        }
    }

子子组件传递数据

子组件之间不能相互传值，那么必须依靠父组件来进行值的传递，即子组件的值传递到父组件，再由父组件传递到另一个子组件。

如我们定义一个data，让它从子组件向父组件传递：

let data = {
    iss: this.iss
    con: this.textContent
    url: this.upImgUrl
}
this.$emit('listen', data)

在父组件中接收数据：(注意标签issue是写在父组件中的一个子组件)

因为子组件中发送了一个listen事件，则在使用子组件时需要借用这个listen事件：

listenMsg(data){
     this.postData = data;
}

在父组件中定义postData获取到数据。

从父组件向另一个子组件传递值：

在circle中获取值，但是如果直接在mounter中获取值，则只能获取到原始值，并不能监测到另一个子组件传递过来的值，所以我们需要在watch中来获取数值：

props: [‘data’],
    watch: {
        data(newVal){
            this.circleList.unshift(newVal);
        }
    }

这样，我们完成了子组件与父组件，父组件与子组件的传值。