9、Vue组件-组件v-model双向数据绑定，组件Slot插槽

组件v-model双向数据绑定

1. v-model 一般用于 input 标签的双向数据绑定
2. 对于组件如何实现双向数据绑定？比如重新 input标签功能
3. 自定义组件MyInput.vue 实现双向数据绑定

MyInput.vue组件 完成input标签的双向数据绑定

<template>
    <div>
        <!--当input标签值改动的时候，触发事件myInput，传递参数；"update:事件名称"固定写法；-->
        <input type="text" :value="myInput" @input="$emit('update:myInput',$event.target.value)"/>
    </div>
</template>
<script>
export default {
    props:{
        //定义props属性，v-model组件双向数据绑定时使用
        myInput:{
            type: String
        }
    }
}
</script>

Home.vue 组件使用MyInput.vue组件时，双向数据绑定

<template>
    <div>
        主页面列表信息，组件实现双向数据绑定
        <hr>
        <br>
        <br>
        <!--组件上双向数据绑定必须，v-model:myInput 其中myInput是，组件定义的props属性;内部也会定义myInput事件-->
        <my-input v-model:myInput="msg"></my-input>
        <br>
        <br>
        {{msg}}
    </div>
</template>
<script>
import MyInput from './views/MyInput.vue'
export default {
    data() {
        return {
            msg: '信息内容'
        }
    },
    components:{
        MyInput
    }
}
</script>

组件v-model可以双向数据绑定多个值

组件绑定多个值 MyInput.vue

<template>
    <div>
        <input type="text" :value="myInput" @input="$emit('update:myInput',$event.target.value)"/>
        <input type="number" :value="myAge" @input="$emit('update:myAge',$event.target.value)"/>
    </div>
</template>
<script>
export default {
    props:["myInput","myAge"]
}
</script>

组件Home.vue使用MyInput.vue 双向绑定多个值

<template>
    <div>
        主页面列表信息，组件实现双向数据绑定
        <hr>
        <br>
        <br>
        <my-input v-model:myInput="name" v-model:myAge="age"></my-input>
        <br>
        <br>
        {{name}}--{{age}}
    </div>
</template>
<script>
import MyInput from './views/MyInput.vue'
export default {
    data() {
        return {
            name: 'jake',
            age: 23
        }
    },
    components:{
        MyInput
    }
}
</script>

组件Slot插槽

1. 当组件内容体需要有外部指定时，可在组件中定义Slot 插槽
2. Slot 可以传递字符串、HTML标签及组件
3. Slot可以有默认值
4. 组件内部哪里需要替换(外部指定时)，定义Default

案例 按钮 组件Slot，按钮名称由外部指定 MyButton.vue

<template>
    <button>
        <slot>Default</slot>
    </button>
</template>

<script>
export default {
    methods: {
        
    },
}
</script>

Home.vue 使用插件MyButton.vue，指定Slot内容

<template>
    <div>
        主页面列表信息，组件 Slot案例
        <hr>
        <br>
        <br>
        <my-button></my-button>
        <br>
        <my-button>保存</my-button>
        <br>
        <my-button>删除</my-button>
        <br>
        <my-button><i>Icron</i>发布</my-button>
    </div>
</template>
<script>
import MyButton from './views/button/MyButton.vue'
export default {
    data() {
        return {
        }
    },
    components:{
        MyButton
    }
}
</script>