VUE组件之数据共享

vue中data数据的传递主要有以下几种情况：
1 在dom中直接调用父组件中的data数据
2 在子组件中调用父组件的data数据
3 在父组件中调用子组件的data数据
4 在孙子组件中调用子组件的数据
5 在子组件调用孙子组件的数据

一、在dom中直接调用父组件的数据

简单来说就是怎么取出父组件的data数据。
1 一般我们可以直接使用{{属性名}}的属性，代码如下：

<div id="test">
        {{favorite}}
    </div>
    <script>
        var vm = new Vue({
            el:"#test",
            data:{
                favorite:"H5"
            }
        })
    </script>

界面打印效果：可以看出数据已经被渲染到dom中了

2、如果是绑定data数据，那么直接写属性名就行

<div id="test" v-bind:test='favorite'>

二、在子组件中调用父组件的data数据

这个时候我们需要借助组件的props属性了，该属性的值可以是一个数组，也可以是一个对象。如果是数组，数组中的内容是调用该组件绑定的数据名称（可以绑定任意多个）；如果是对象，可以对每一个绑定的数据类型等进行验证（这是另外一个话题了）；

在刚才代码的基础上我们增加一个组件，并在父组件中调用它，通过v-bind绑定一个父组件中data的favorite属性，然后我们在props组件中接收了这个值，并在它的模板中将其展示出来，先看效果：

从上图可以看出我们在子组件中已经可以调到父组件data中favorite的值了，代码如下：

    <div id="test" >
        {{favorite}}
        <good v-bind:test='favorite'></good>
    </div>

    <script type='text/template' id="good">
        <div id='good'>
        	// 调用传过来的值
            {{test}}
        </div>
    </script>
    <script>
		// 定义一个组件
        Vue.component('good',{
        	//props接收值，里面的‘test’ 要和上面传过来的数据的名称一致
            props:['test'],
            template:'#good'
        })

        var vm = new Vue({
            el:"#test",
            data:{
                favorite:"H5"
            }
        })
    </script>

三、在父组件中调用子组件的data数据
有时候我们需要将子组件的数据传给父组件使用，比如，我们想做一个单选按钮的组件，并且选择状态和数据保持同步状态

如何将组件中的值传到外面，这里我们需要用到事件的抛发 $emit(‘事件名称’，‘抛发的值’)，【事件名称自定义，要保证接收的和抛发的一致】，事件名称默认为input 值为value，当然了既然是默认，我们也可以根据具体情况去修改它，下面我们会以小梨子来说明具体怎么操作的。

效果展示：

小梨子： 单选按钮效果
我们需要修改默认的事件（input）和 “值（value）”，通过组件的model属性来设置，然后绑定到props中，这个是为了接收外部传进来的初始值

主要代码：

组件修改model
model:{
    event:'change',
    prop:"checked"
},
props:{
    // test:String,
    checked:Boolean
},
抛发事件，接收事件
//抛发
<input type="checkbox" :checked='checked' @change="$emit('change',$event.target.checked)">
//接收
<good v-bind:test='favorite' @input="favorites" @change='changeCheck' :checked='finalChecked'></good>
        {{finalChecked}}

最终效果展示：

四、在孙子组件中调用子组件的数据

我们先要在子组件中嵌套一个组件，一般我们使用另外一个属性 components来处理这种组件嵌套。

在下面的代码中，我定义了两个组件，一个apple 一个orange，最终实现效果：在orange这个组件中调取apple的数据。效果图：

上代码：

首先利用components在根组件中嵌套apple，然后在apple中利用components嵌套orange，实现一个连通性，中间数据传递我们依然借用了props做媒介。

//根组件
var vm = new Vue({
    el:"#app",
    data:{
        favorite:'苹果'
    },
    components:{
        apple
    }
})
//apple组件
const apple = {
    props:['apples'],
    template:`
    <div>
        <p>我喜欢---{{apples}}</p>
        <orange :oranges='apples'></orange>
    </div>
    `,
    components:{
        orange
    }
}
//orange组件
const orange = {
    props:['oranges'],
    data(){
        return {
            others:"橘子"
        }
    },
    template:`
        <p>我喜欢{{oranges}}</p>
    `
}
//调用apple组件
<apple :apples='favorite'></apple>

五 在子组件调用孙子组件的数据

遇到这个问题，通常我们的做法可能是，从孙子组件抛发出来，然后在子组件接收一下

//orange组件抛发数据
<input type="text" @input='$emit("input",$event.target.value)'>
//apple组件接收数据
<orange :oranges='apples' v-model='favorite'></orange>
{{favorite}}

到此为止，我们可以实现根组件和子组件，孙子组件的数据共享了。下面还有几种数据共享的方式，单独列出。

---

数据共享的便捷方式：

一、利用 $root $parent ref （数据支持响应式的）

这几个方式是在边界问题处理中提出来的，他们的功能如下：

1、在每个 new Vue 实例的子组件中，其根实例可以通过 $root属性进行访问2、$parent 属性可以用来从一个子组件访问父组件的实例
3、访问子组件的数据，这里用到ref这个属性（它提供对内部这个指定元素的访问）

//在子组件中，我们可以这样访问根组件的数据
mounted() {
  console.log(this.$root.username)
}
//在子组件中，我们可以这样访问孙子组件的数据（在子组件调用孙子组件时，要加上ref属性）
<test ref="apple" ></test>
mounted(){
  console.log(this.$refs.apple.title);
}
//在孙子组件中，我们可以这样访问父组件和根组件的数据
mounted() {
  console.log(this.$root.username)
  console.log(this.$parent.title)
},
//在根组件中调用子组件的数据，同样在调用组件中要加上ref这个属性
<test ref='myinputs'></test>
 mounted(){
     console.log(this.$refs.myinputs.title)
 }

二、依赖注入方式（数据不支持响应式，也就是数据修改了页面不会自动刷
新，需要手动）
主要用到两个新的实例选项：provide 和 inject
provide 选项允许我们指定我们想要提供给后代组件的数据/方法。
inject 选项来接收指定的我们想要添加在这个实例上的属性。

我们先看下下图效果，最终发现修改了属性值，左边并没有同步变化，所以它是非响应式的，这是个很大的问题。

代码：

//在根组件设置一个provide good这个属性名是自定义的
provide:function(){
    return {
        good:this.vehicle,
    }
}
//在孙子组件中去接收 inject  inject中的属性名要和provide中定义的保持一致
const personb = {
    inject:['good'],
    template:`
        <div>
            <p>personb---{{good}}</p>
        </div>
    `
}

三、事件总线

event bus在新版的vue中已经被移除了，但是我们还是学习一下它的一个工作机制，总的来说它也是一收一发。

代码：

//使用前，先new一个vue实例
  var eventbus = new Vue();
//抛发
methods:{
    sendHand(){
        eventbus.$emit('message','你好')
    }
}	
//接收
mounted(){
	//msg是接收的数据，message要和抛发的事件类型一致
    eventbus.$on('message',(msg)=>{
        console.log(msg)
        //改变data的属性值，方便呈现
        this.message = msg;
    })
}

以上就是vue组件中关于数据共享的一些方法。