视频学习笔记04

视频学习笔记

vue中的组件之间的通信

父组件访问子组件

如果需要父组件访问子组件：
1.使用$children
2.使用$refs
$refs是一个对象类型，默认是一个空的对象，使用$refs还可以在子组件的标签名中用ref定义，这样就可以取到对应的子组件的内容，而不需要通过遍历的方式或者数组下标的方式传值，要访问对应的子组件，就可以直接使用this.$refs.(用ref定义在子组件标签名中定义的名字)
$children是一个数组类型，它包含所有的子组件对象
例如，在父组件中要访问子组件的一个方法，可以直接用this.$children[0].showMessage()获取到方法（假设取第一个组件的showMessage()方法）

// 这里通过遍历取出子组件的所有的name
 for (let c in this.$children) {
                     console.log(c.name);
                     c.showMessage();
                 }

子组件访问父组件

使用$parent访问父组件，可以直接在子组件的methods里定义一个方法，然后用this.$parent取到父组件的内容，也可以用$root直接访问根组件，即vue实例对象

父子组件之间的通信------小案例

需求：在子组件中有输入框，输入框中绑定父组件中的值，并且改变输入框中的值，父组件中的值也会相应进行改变。（不能直接使用v-model，vue实例不允许子组件使用v-model直接绑定父组件中的data）
1.首先使用v-bind将父组件中的值绑定到子组件的props中，在子组件中定义data函数，用this取到props中的值。
2.在input框中绑定data函数中的值，并绑定方法改变data函数中的值<input type="text" v-bind:value="" @input="">，并在子组件的方法之中可以使用$emit()来触发事件，将该事件发出给父组件.
3.父组件用v-on监听事件，并将子组件传过来的值赋给父组件data中（默认传过来的值都是string类型，要改为数字类型this.num1 = parseInt(value)）

   const app = new Vue({
        el: '#app',
        data: {
            fruit:'apple',
            num1: 1,
            num2: 0,
        },
        methods: {
            num1change(value) {
                this.num1 = parseInt(value)
            }
        },
        components: {
            cpn: {
                template: '#cpn',
                props: {
                    number1: Number,
                    number2: Number,
                },
                data() {
                    return{
                        dnumber1: this.number1,
                        dnumber2: this.number2,
                    } 
                },
                methods: {
                    num1Input(event) {
                        this.dnumber1 = event.target.value;
                        this.$emit('num1change',this.dnumber1)
                    }
                }
            }
        }
    })

组件插槽slot的基本使用

组件的插槽是为了让我们的封装的组件更加具有扩展性，让使用者可以决定组件内部到底展示什么。
比如在移动网站中的导航栏，移动开发中，几乎每个页面都有导航栏，将导航栏封装成一个插件，就可以在多个页面进行复用
使用原则：抽取共性，保留不同

    <template id="cpn">
        <div>
            <h2>我是组件</h2>
            <slot></slot>
        </div>
    </template>

要使用slot插槽，直接在<cpn></cpn>中添加元素即可，如果有默认值，可以直接添加在<slot></slot>中；如果有多个值，同时放入到组件中进行替换，slot会一起作为替换元素

具名插槽的使用

给slot插槽一个name属性，在父组件中使用slot时用slot="slot的name"即可

作用域插槽的使用

父组件模板的所有东西都会在父级作用域内编译，作用域是父组件，使用的属性也是属于父组件的属性，子组件模板的所有东西会在子级作用域内编译。所以有时候需要使用slot作用域插槽，父组件替换插槽的标签，但是数据由子组件提供。

// 子组件
<slot :data="pLanguage">
     <ul>
         <li v-for="item in pLanguage">{{item}}</li>
     </ul>
</slot>

//父组件
        <cpn>
            <!-- 目的是获取子组件中的pLanguage -->
            <template slot-scope="slot">
                <span v-for="item in slot.data">{{item}}</span>
            </template>
        </cpn>