Vue父子组件之间传递数据

怼烎@ 2023-09-28 11:59 147阅读 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>