【VUE】父子组件传值

【父对子】

父组件监听子组件值和方法v-on、$emit

// 父组件
    <List  v-on:onShowShare="onShowShare"/>

  data() {
    return {
       showShare: false
    };
  }
 methods: {
    onShowShare(v) {
        this.showShare = v
        console.log('onShowShare',v);
    }
}

子组件

  data() {
    return {
       list: []
    };
  }
 methods: {
    getList() {
       const share = this.list.length > 0 
        this.$emit('onShowShare',share)
    }
}

父组件调用子组件方法，更新子组件

• 利用$refs 获取子组件方法
• watch动态监听props更新
• 子组件

<script>
  export default {
    name: "child",
    props: "someprops",
    watch: {
      hotWord(newV) {
      // console.log('hotWord-newV',newV,old);
    }
   },
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

• 父组件

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild" :hotWord="value"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {child: Child },
    data() {
     return {
         value: ''
      }
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick(this.value);
      }
    }
  }
</script>

【子对父】

子组件.sync 修饰符动态更新父组件

.sync 修饰符，只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。

作者：littleTank
链接：https://www.jianshu.com/p/6b062af8cf01

示例：

<comp :foo.sync="bar"></comp>

扩展成：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

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

this.$emit('update:foo', newValue)

具体示例demo

<template>
  <div class="details">
      <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
      <button @click="changeValue">toggle</button>
  </div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
    template: `<div v-if="show">
                  <p>默认初始值是{{show}}，所以是显示的</p>
                  <button @click.stop="closeDiv">关闭</button>
               </div>`,
    props:['show'],
    methods: {
      closeDiv() {
        this.$emit('update:show', false); //触发 input 事件，并传入新值
      }
    }
})
export default{
  data(){
      return{
          valueChild:true,
      }
  },
  methods:{
      changeValue(){
          this.valueChild = !this.valueChild
      }
  }
}
</script>