Vue父子组件

###Vue中父组件箱子组件传递数据的几种方法

1.基本概念

• 在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

第一种方法：props & event

父组件想子组件传递props数据，子组件通过触发时间想父组件回传数据：

子组件

<template>
    <div @click="changeName('YYY')">{{name}}</div>
</template>
<script>
export default{
    props:['name'],//or 
    props:{
        name:{
            type:String,
            default:''
        }}
    methods:{
        //不能在子组件修改props数据，应触发事件让父组件处理
        changeName(newName){
            this.$emit('changeName',newName)
        }
    }
}

父组件

<template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</template>
<script>
    import childComp from 'path'
    export default{
        data(){
            return {name:'XXX'}
        },
        components:{
            childComp
        },
        methods:{
            changeName(newName){
                this.name = newName;
            }
        }
    }
</scritp>

以上即使一个完整的流程，父组件通过prorps将数据传递给子组件，子组件触发事件，由父组件监听，并做响应处理

第二种方法： ref

ref属性可定义在子组件或原生DOM上，如果在子组件上免责指向子组件实例，如果在原生DOM上，则指向原生DOM元素，（可以用做元素的选择，省去querySelector的烦恼）。

传递数据的思路：在父组件内通过ref获取子组件实例，然后调用子组件方法，并传递相关数据作为参数：

子组件

<template>
    <div>{{parentMsg}}</div>
</template>
<script>
export default{
    data(){
        return {
            parentMsg:''
        }
    },
    methods:{
        getMsg(msg){
            this.parentMsg = msg;
        }
    }
}
</script>

父组件

<template>
    <div>
        <child-comp ref="child"></child-comp>
        <button @click="sendMsg">SEND MESSAGE</button>
    </div>
</template>
<script>
    import childComp from 'path'
    export default{
        components:{
            childComp
        },
        methods:{
            sendMsg(){
                this.$refs.child.getMsg('Parent Message');
            }
        }
    }
</scritp>

第三种方法：provide & inject 官方不推荐在生产环境中使用

provide意为提供，当一个组件通过provide提供了一个数据，name他的子孙组建就可以使用inject接收注入，从而可以使用祖先组件传递过来的数据。

child

<template>
    <div>{{appName}}</div>
</template>
<script>
export default{
    inject:['appName']
}
</script>
 
// root 
export default{
    data(){
        return {
            appName:'Test'
        }
    },
    provide:['appName']
}

4. Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能