Vue父子组件间的通信与访问

Vue父子组件间的通信（父传子）

1. 在父组件data属性中声明对应的数据，并建立父子组件间的关系
2. 在子组件中定义props属性，属性值为在HTML模板中使用时的标签名
3. 在Vue实例范围内创建v-bind绑定属性，绑定对应关系
4. 在子组件HTML莫版内使用创建的模板名即可

    <div id="app">
        <cpn :childmessage="message"></cpn>
    </div>
    <template id="tp">
        <div>
            {{childmessage}}
        </div>
    </template>
    <script>
        // 子组件
        const cpn = Vue.component("cpn", {
            template: "#tp",
            // 父传子
            props: {
            //注意：此处不建议使用驼峰写法；如果写了的话，需要在v-bind绑定时通过"-"拆分连接并小写，例如childMyMessage拆分成child-my-message
                childmessage: {
                    type: String,
                    default: "222"
                }
            }
        })
        // root组件
        const app = new Vue({
            el: "#app",
            data: {
                message: '父组件内容'
            },
            components: {
                cpn
            }
        })
    </script>

props:{
// 1.类型限制
cmovies:Array, //基础的类型检查，'null’匹配任何类型
cmessage:String,
cmessage2:[String,Number],//多个可能的类型
// 2.提供一些默认值
cmessage2:{
type:String,
default:‘aaaaaa’,
// required:true //表示必须给该属性值传递数据，即必须在Vue实例中绑定
},
cmessage3:{
// 类型是对象或数组时，默认值必须是一个函数
type:Array,
default(){
return []
}}

Vue父子组件间的通信（子传父）

1. 在父组件data属性中声明对应的数据，并建立父子组件间的关系
2. 在子组件中v-on绑定对应的事件响应函数，然后通过$emit()发射触发事件到父组件
3. 在Vue实例范围内，通过v-on来监听子组件的事件
4. 在父组件中创建绑定对应的事件响应函数

  <!-- 父组件模板 -->
    <div class="app">
        <h2>Count:{{total}}</h2>
        <!-- 绑定自定义事件到父组件模板,并监听父组件对应的事件函数 -->
        <cpn @decrement="decrease" @increment="increase"></cpn>
    </div>
    <!-- 子组件模板 -->
    <template id="temp">
        <div>
            <button @click="decrement">-</button>
            <button @click="increment">+</button>
        </div>
    </template>
    <script>
        // 定义子组件
        let cpn = Vue.component("cpn",{
            template: '#temp',
            data(){
                return {
                    counter:0
                }
            },
            methods: {
                increment() {
                    this.counter++;
                    console.log(this.counter);
                    // 向父组件暴露发送自定义事件，第二个参数会传递到父组件定义的事件对象中
                    this.$emit('decrement',this.counter)
                },
                decrement() {
                    this.counter--;
                    console.log(this.counter);
                    // 向父组件暴露发送自定义事件
                    this.$emit('increment',this.counter)
                }
            }
        });
        // 定义父组件/Vue实例
        let app = new Vue({
            el: '.app',
            data:{
                total:0
            },
            components: {
                cpn
            },
            methods: {
                increase(counter) {
                    this.total=counter
                },
                decrease(counter) {
                    this.total=counter
                }
            }
        })

Vue父子组件间的访问（父访问子）

1. $children(很少用)
   ==>返回的结果是一个数组，通过索引来获取对应的子组件；但子组件数量更改时不便访问
2. $refs
   ==>返回的结果是一个对象，默认是一个空对象，通过在子组件上添加ref属性，从而可以添加到对象中，并通过属性名来获取对应的子组件

Vue父子组件间的访问（子访问父）

1. $parent
2. $root（访问到根组件的Vue实例）