(二十一)父子组件传值,子组件调用父组件事件(v-model,emit)使用，自定义非prop的attribute的继承方式

1：调用组件，并且通过自定义属性向子组件传入keywork，keywork1两个值,传Child事件

<input-box v-model:modelkey="keywork" v-model:modelkey1="keywork1" @showChild="Child">

</input-box>

2：子组件通过props获取传过来的值

  props:["modelkey","modelkey1","selectkey"]

3:还可以通过$emit('update:modelkey1',$event.target.value)把值回传给父组件,实现子组件和父组件数据的双向绑定

<input type="text" :value="modelkey1" @input="$emit('update:modelkey1',$event.target.value)" placeholder="输入内容"/>

或者

<input type="text" v-model="modelkeyto" @input="$emit('update:modelkey',$event.target.value)" placeholder="输入内容"/>

4：通过this.$emit('showChild','111','3333')"的方式调用父组件传过来的Child事件

<button @click="this.$emit('showChild','111','3333')">弹框</button>

完整代码：

父组件代码：

<template>

自定义组件属性数据双向绑定:<br/>

<input-box v-model:modelkey="keywork" v-model:modelkey1="keywork1" v-model:selectkey="selectkeyvalue" @showChild="Child">

</input-box>

<input type="text"  v-model="xx" />

{{this.xx}}

<br/>

  {{this.keywork}}

  <br/>

  {{this.keywork1}}

  <br/>

  {{selectkeyvalue}}

</template>

<script>

import childbox from './child.vue'

export default {

  name: "AppA7",

  data() {

    return {

        keywork:"女装1",

        keywork1:"男装",

        xx:"ww",

        selectkeyvalue:"2"

    };

  },

  components: {

  "input-box":childbox

  },

  methods: {

     Child(data,data1){

        alert(data+"  "+data1)

     }

  },

  mounted() {},

};

</script>

 

子组件代码：

<template>

<!-- <input type="text" :value="modelkey" @input="$emit('update:modelkey',$event.target.value)" placeholder="输入内容"/>

<input type="text" :value="modelkey1" @input="$emit('update:modelkey1',$event.target.value)" placeholder="输入内容"/> -->

<input type="text" v-model="modelkeyto" @input="$emit('update:modelkey',$event.target.value)" placeholder="输入内容"/>

<input type="text" v-model="modelkey1to" @input="$emit('update:modelkey1',$event.target.value)" placeholder="输入内容"/>

<select  v-model="couponSelected" @change="$emit('update:selectkey',$event.target.value)">

  <option  value="1">选择1</option>

  <option  value="2">选择2</option>

  <option  value="3">选择3</option>

</select>

{{this.selectkey}}

{{this.modelkey}}

{{this.modelkey1}}

<br/>

<button @click="this.$emit('showChild','111','3333')">弹框</button>

</template>

<script>

export default {

  name: "AppA7",

  data() {

    return {

      couponSelected: '',

    };

  },

  created(){

      this.couponSelected =this.selectkey;

      this.modelkeyto=this.modelkey;

      this.modelkey1to=this.modelkey1;

  },

  components: {

  },

  methods: {

  },

  mounted() {},

  props:["modelkey","modelkey1","selectkey"]

};

</script>

5：如果是在同一个页面实现数据双向绑定可以直接通过v-model就可以实现了

<input type="text"  v-model="xx" />

{{this.xx}}

data() {

    return {

        xx:"ww",

    };

  },

 

 6：如果子组件是非props方式接受父组件穿过来的之,指定子组件的标签去继承父组件传过来的属性及属性值的时候

父组件代码：

(1)父组件传class或者其他自定义属性(通常class,style,id等自带属性或者只做传值用,不在方法里面用到)

<childboxfei class="blues">

</childboxfei>

子组件代码：

(1)去掉默认的继承方式

export default {

  inheritAttrs:false,

(2)指定哪些标签会继承父组件传过来的class="blues"

  <button v-bind="$attrs">按钮一</button><br/>

  <button>按钮一</button><br/>

  <button v-bind="$attrs">按钮一</button>

呢样(1),(3)就相当于带class="blues"呢样的样式了

呢种的优势是不需要props去一一接收，加了$attrs的标签会一并继承父组件传过来的所有属性，但如果要在方法里面使用传过来的值就最好用props

 

注意：

v-model是数据需要双向绑定，不需要双向绑定就不需要v-model