<template>
  <div>
    父組件：
    <el-input v-model="val" style="width:300px" />
    <child :value="val" />
  </div>
</template>
  
  <script>
  import child from './child.vue'
  
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父組件'
      }
    },
    components: {
      child
    },
  
  }
  </script>

子組件代碼：

<template>
 
    <div class="child">
        子組件： {{  value  }}
    </div>
 
</template>
  
  <script>
 
export default {
    name: 'App',
    data() {
        return {
        }
    },
    props: ['value']
 
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

2.子組件向父組件進(jìn)行傳值

父組件代碼：

<template>
  <div>
    父組件：
    <el-input v-model="val" style="width:300px" />
    <child :value="val" @bindMsg='msgFun' />
  </div>
</template>
  
  <script>
  import child from './child.vue'
  
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父組件'
      }
    },
    components: {
      child
    },
    methods: {
      msgFun(childVal) {
        console.log(childVal,'childVal')
        this.val = childVal
      }
    }
  
  }
  </script>

子組件代碼：

<template>
 
    <div class="child">
        子組件： {{  value  }}
        <el-button @click="$emit('bindMsg', '我是子組件')">點擊改變父組建數(shù)據(jù)</el-button>
    </div>
 
</template>
  
  <script>
 
export default {
    name: 'App',
    data() {
        return {
        }
    },
    props: ['value'],
  
 
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

3.非父子組件之間的傳值

.sync可以幫我們實現(xiàn)父組件向子組件傳遞的數(shù)據(jù)的雙向綁定，所以子組件接收到數(shù)據(jù)后可以直接修改，并且會同時修改父組件的數(shù)據(jù)

ref綁定在子組件上，引用的指向就是子組件的實例，父組件可以通過 ref 主動獲取子組件的屬性或者調(diào)用子組件的方法

父組件代碼：

<template>
  <div>
    父組件：
    <el-input v-model="val" style="width:300px" />
    <el-button @click="childRefClick">父組件ref點擊</el-button>
    <child :value="val" @bindMsg='msgFun' :data.sync='data' ref='child' />
  
 
  </div>
</template>
  
  <script>
  import child from './child.vue'
  
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父組件',
        data: ''
      }
    },
    components: {
      child
    },
    methods: {
      msgFun(childVal) {
        console.log(childVal, 'childVal')
        this.val = childVal;
  
      },
      childRefClick() {
        //ref獲取子組件實例的屬性和方法
        const child = this.$refs.child
        console.log(child.name)
  
        child.childBtnClick("調(diào)用了子組件的方法")
      }
    }
  
  }
  </script>

子組件代碼：

<template>
 
    <div class="child">
        子組件： {{  value  }}
        <el-button @click="childBtnClick">點擊改變父組建數(shù)據(jù)</el-button>
    </div>
 
</template>
  
  <script>
 
export default {
    name: 'App',
    data() {
        return {
            currenData: {}
        }
    },
    props: ['value', 'data'],
 
    methods: {
        childBtnClick(val) {
            console.log(val,'val')
            this.$emit('bindMsg', val || '我是子組件')
        },
    
    },
 
 
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

非父子組件之間的傳值方式還有slot插槽，vuex數(shù)據(jù)狀態(tài)管理器等等