Vue父子组件之间传递数据-蒲公英云

Vue父子组件之间传递数据

怼烎@ 2023-09-28 11:59 186阅读 0赞

父向子：v-bind()+props

父组件绑定属性向子组件传递数据，子组件通过props进行数据的接收。

父组件代码如下：

<template>
    <div id="app">
        <child :num="size"></child>
    </div>
</template>
<script>
    //引入组件
    import child from '@/zhao/data'
    export default{
        name:'app',
        data(){
            return{
                size:22,
            }
        },
        //注册组件
        components:{
            child,
        }
    }
</script>

子组件接收和使用数据：

<template>
  <div id="father">
    <!-- 使用数据  -->
    {
   { num }}
  </div>
</template>
<script>
export default {
  name:'father',
  data(){
    return{
    }
  },
  // 接收数据
  props: ['num'],
}
</script>

子向父：自定义事件 $emit

子组件部分代码：

<template>
    <div id = "login">
        <label>
            <p用户名：{
   {user}}</p>
            <input v-model="username" @change="setUser"/>
        </label>
    </div>
</template>
<script>
export default {
  name:'login',
  data(){
    return{
        username:'',
    }
  },
  methods:{
    setUser:function(){
        this.$emit('transferUser',this.username)
    }
  },
  components:{
      LoginDiv,
  },
}
</script>

父组件部分代码：

<template>
    <div id = "app">
        <LoginDiv @transferUser="getUser"></LoginDiv>
        <p用户名：{
   {user}}</p>
    </div>
</template>
<script>
//引入组件
import LoginDiv from '@/zhao/login'
export default {
  name:'app',
  data(){
    return{
        user:'',
    }
  },
  methods:{
    getUser(msg){
        this.user = msg
    }
  },
  components:{
      LoginDiv,
  },
}
</script>

总结：

（1）子组件传递数据：

this.$emit('自定义事件名', '要传递的数据')

（2）父组件接收数据：

<子组件名 @自定义事件名="方法名"/>
//.....
methods: {
    方法名(val) {
      // val 是子组件传递过来的数据
      // 、、、
    }
  }

父子双向：v-model + this.$emit()

父组件部分代码：

<template>
  <div class="home">
    <h1>Home 组件- - -{
   { count }}</h1>
    <button @click="count+=1">点击按钮， 数量 +1（父组件）</button>
    <Test v-model:num="count"/>
  </div>
</template>
<script>
import Test from './components/Test'
export default {
  name: 'Home',
  components: {
    Test,
  },
  data() {
    return {
      count: 1
    }
  },
}
</script>

子组件部分代码：

<template>
  <div>
    <h1>Test 组件- - -{
   { num }}</h1>
    <button @click="add">点击按钮 数量 +1（子组件）</button>
  </div>
</template>
<script>
export default {
  name: 'Test',
  props: ['num'],
  emits: ['update:num'], // 这行可写可不写，写了是方便统计emit方法，这里定义了的方法，后面this.$emit才能触发
  methods: {
    add() {
      this.$emit('update:num', this.num + 1)
   }
  }
}
</script>
<style>
</style>

总结：

（1）父组件核心代码

<子组件名 v-model:属性名="属性值"/>

（2）子组件核心代码

<template>
  <div>
    <!-- 使用数据  -->
    {
   { 属性名 }}
    <button @click="方法名">点击进行操作</button>
  </div>
</template>
<script>
export default {
  // 接收数据
  props: ['属性名'],
  emits: ['update:属性名'], // 这行可写可不写，写了是方便统计emit方法，写了的话，这里定义了的方法，后面this.$emit才能触发
  methods: {
    方法名() {
      this.$emit('update:属性名', 属性值操作)
   }
  }
}
</script>