第二十一节:Vue组件:父组件使用子组件时的修饰符和双向数据绑定

1. 原生事件修饰符.native

1.1. 关于组件标签上的事件

在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理

示例代码如下:

<div id="app">
    <!-- 使用组件 -->
    <!--  组件标签上使用DOM元素原生事件不会触发, -->
    <my-component 
                  :clicks="clicks" 
                  @click="handleParentClick"
                  ></my-component>
</div>

<!-- 组件模板 -->
<template id="MyComponent">
    <div>
        被点击了
        <button>点击</button>
    </div>
</template>

<script>

    //  组件选项对象
    let MyComponent = {
        template: `#MyComponent`,
    }

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            "MyComponent": MyComponent
        },
        methods:{
            handleParentClick(){
                // 11 不会打印
                console.log(11);
            }
        }
    })

</script>

此时子组件上绑定的是自定义的事件不是原生的事件,
因为是自定义事件,我们就可以通过使用触发自定义事件的方式,来触发.
通过$emit 触发这个组件标签上的自定义事件

示例代码如下:

<div id="app">
    <!-- 使用组件 -->
    <!--  click 事件不会被当做DOM原生事件处理,只会被当做自定义事件处理-->
    <my-component 
                  @click="handleParentClick"
                  ></my-component>
</div>

<!-- 组件模板 -->
<template id="MyComponent">
    <div>
        被点击了
        <!-- 1\. 子组件通过原生click事件触发子组件自己的函数 -->
        <button @click="handleClick">点击</button>
    </div>
</template>

<script>

    //  组件选项对象
    let MyComponent = {
        template: `#MyComponent`,
        methods:{
            handleClick(){
                // 触发组件标签上自定义事件click
                this.$emit("click")
            }
        }
    }

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            "MyComponent": MyComponent
        },
        methods:{
            handleParentClick(){
                console.log(11);
            }
        }
    })
</script>

1.2 可以通过修饰符来处理组件标签上的原生事件

如果需要在子组件的dom上绑定原生的事件,而不是一个自定义事件该如何处理
可以通过 vue提供了修饰符.native来告知绑定的是原生的事件

示例代码如下:

<div id="app">
     <!-- 使用组件 -->
     <!-- 在组件标签上,如果需要使用原生事件,使用修饰符native, 这样vue就会把他当做原生事件处理了-->
    <my-component 
        @click.native="handleParentClick"
    ></my-component>
</div>

<!-- 组件模板 -->
<template id="MyComponent">
    <div>
        被点击了
        <button>点击</button>
    </div>
</template>

<script>
    //  组件选项对象
    let MyComponent = {
        template: `#MyComponent`,
    }

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            "MyComponent": MyComponent
        },
        methods:{
            handleParentClick(){
                console.log(11); 
            }
        }
    })
</script>

2. 双向绑定修饰符.sync

在一些情况下，我们可能会需要对一个 prop 进行“双向绑定”。事实上，这正是 Vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的 prop 的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流。由于子组件改变 props 的代码和普通的状态改动代码毫无区别，光看子组件的代码时，你完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本。

上面所说的正是我们在 2.0 中移除 .sync 的理由。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。

从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

2.1 原来我们子组件要修改父组件状态是如下用法

父组件中

<div id="app">
     <!-- 使用组件 -->
    <my-component 
        :clicks="clicks"
        @update:clicks = "handleParentClick"
    ></my-component>
</div>

<script>

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data:{
            clicks: 0
        },
        components: {
            "MyComponent": MyComponent
        },
        methods:{
            handleParentClick(value){
                this.clicks = value
            }
        }
    })
</script>

子组件

<!-- 组件模板 -->
<template id="MyComponent">
    <div>
        被点击了{{ clicks }}次
        <button @click="handleClick">点击</button>
    </div>
</template>

<script>

    //  组件选项对象
    let MyComponent = {
        props:["clicks"],
        template: `#MyComponent`,
        data(){
            return {
                num:this.clicks
            }
        },
        methods: {
            handleClick(){
                this.num++;
                this.$emit("update:clicks",this.num)
            }
        }
    }
</script>

2.2 现在使用.sync修饰符后的用法

父组件

<div id="app">
     <!-- 使用组件 -->
    <my-component 
        :clicks.sync="clicks"
    ></my-component>
</div>

<script>
    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data:{
            clicks: 0
        },
        components: {
            "MyComponent": MyComponent
        }
    })

</script>

子组件

<!-- 组件模板 -->
<template id="MyComponent">
    <div>
        被点击了{{ clicks }}次
        <button @click="handleClick">点击</button>
    </div>
</template>

<script>

    //  组件选项对象
    let MyComponent = {
        props:["clicks"],
        template: `#MyComponent`,
        data(){
            return {
                num:this.clicks
            }
        },
        methods: {
            handleClick(){
                this.num++;
                this.$emit("update:clicks",this.num)
            }
        }
    }

</script>

2.3 通过示例我们就会发现

其实

  <my-component 
        :clicks.sync="clicks"
    ></my-component>

会被扩展为

<my-component 
        :clicks="clicks"
        @update:clicks = "handleParentClick"
    ></my-component>

当子组件需要更新 clicks 的值时，它需要显式地触发一个更新事件：

handleClick(){
    this.num++;
    this.$emit("update:clicks",this.num)
}

3. 组件的双向数据绑定 v-model

我们之前已经学过了在普通的DOM元素上使用v-modle指令来处理双向数据绑定, 一般会用在表单元素上

3.1 复习基本v-model的用法

<div id="app">
    <input type="text" v-model="value">
    {{ value }}
</div>

<script>

    const vm = new Vue({
        el:"#app",
        data:{
            value: '' 
        }
    })
</script>

双向数据绑定就是数据变化,显示视图也随之发生变化, 视图发生变化, vue中的数据也发生变化

理解这个原理后,我们也可以自己通过事件来处理双向数据绑定

3.2 使用事件的表单控件

就是我们将data中的数据绑定到表单的value值上, 这样只会在当数据变化的时候改变视图, 但是视图的改变会不会修改数据

那么我们就可以使用一个事件来处理这件事情, 当用户输入内容后就会触发函数, 在函数内获取表单最新的值修改掉data中数据

<div id="app">
    <input 
        type="text" 
        :value="value"
        @input = "changeValue"
    />
    {{ value }}
</div>

<script>
    const vm = new Vue({
        el:"#app",
        data:{
            value: '' 
        },
        methods:{
            changeValue(){
                // 在事件里获取表单的内容
                this.value = event.target.value;
            }
        }
    })

</script>

33 利用自定义事件处理组件中表单的双向数据绑定

我们利用同样的思路, 将父组件的数据通过单向下行数据流传给子组件

在利用自定义事件,将子组件中的数据传递给父组件, 处理成自定义的双向数据绑定

<div id="app">
    <!-- 使用组件 -->
    <my-component 
                  :value="value"
                  @input = "handleParentClick"
                  ></my-component>
    {{ value }}
</div>

<!-- 组件模板 -->
<template id="MyComponent">
    <div>
        <input 
               type="text" 
               :value="value"
               @input="handleInput"
               />
    </div>
</template>

<script>
    //  组件选项对象
    let MyComponent = {
        props:["value"],
        template: `#MyComponent`,
        methods: {
            handleInput(){
                this.$emit("input",event.target.value)
            }
        }
    }

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data:{
            value: '' 
        },
        components: {
            "MyComponent": MyComponent
        },
        methods:{
            handleParentClick(value){
                this.value = value
            },
        }
    })

</script>

3.4 自定义组件的v-model

Vue在2.2.0版本中给允许我们在自定义组件上使用v-model来处理双向数据绑定,

<div id="app">
    <!-- 使用组件 -->
    <my-component 
       v-model="value"
   ></my-component>

   {{ value }}
</div>

<!-- 组件模板 -->
<template id="MyComponent">
   <div>
      <input 
           type="text" 
           :value="value"
           @input="handleInput"
       />
   </div>
</template>

<script>

   //  组件选项对象
   let MyComponent = {
       props:{
           value:{
               type:String,
               required: true
           }
       },
       template: `#MyComponent`,
       methods: {
           handleInput(){
               this.$emit("input",event.target.value)
           }
       }
   }

   //  实例中注册组件
   const vm = new Vue({
       el:"#app",
       data:{
           value: '' 
       },
       components: {
           "MyComponent": MyComponent
       }
   })

</script>

我们会发现在组件中使用v-model指令,等价于

<my-component 
              :value="value"
              @input = "handleParentClick"
              ></my-component>