vue父子组件通信

props

props用于父组件向子组件传值，子组件的props选项用于接收来自父组件的数据，传递是单向的，即只能父组件给子组件传值，不能反向。

父组件：

<template>
    <div>
        <child :message="message"></child>
    </div>
</template>

<script>
import Child from "./Child";

export default {
    name: 'HelloWorld',
    components:{Child},
    data () {
      return {
          message:'父组件传来的'
      }
    },
}
</script>

子组件：

<template>
    <h3>{{message}}</h3>
</template>

<script>
    export default {
        name: "Child",
        props:['message'],
        data(){
            return{
                message:'',
            }
        },
    }
</script>

运行结果：

$refs

• 如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。
• 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素。
  父组件：

<template>
    <div>
        <child ref="msg"></child>
    </div>
</template>

<script>
import Child from "./Child";

export default {
    name: 'HelloWorld',
    components:{Child},
    data () {
      return {
          message:'父组件传来的'
      }
    },
    mounted() {
        this.$refs.msg.getMessage('我是子组件')
    }
}
</script>

子组件：

<template>
    <h3>{{message}}</h3>
</template>

<script>
    export default {
        name: "Child",
        props:['message'],
        data(){
            return{
                message:'',
            }
        },
        methods:{
            getMessage(m){
                this.message = m;
            }
        }
    }
</script>

运行结果：

prop和$ref之间的区别：

• prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
• $ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。

$emit

$emit用于子组件给父组件传值。emit接收两个参数（事件，参数）

vm.$emit( event, arg )

父组件：

<template>
    <div>
        <h1>{{title}}</h1>
        <child @getMessage="showMessage"></child>
    </div>
</template>

<script>
import Child from "./Child";

export default {
    name: 'HelloWorld',
    components:{Child},
    data () {
      return {
        title:''
      }
    },
    methods:{
        showMessage(title){
            this.title = title;
        }
    },
}
</script>

子组件：

<template>
    <h3>子组件</h3>
</template>

<script>
    export default {
        name: "Child",
        props:['message'],
        data(){
            return{
                message:'',
            }
        },
        methods:{

        },
        mounted() {
            this.$emit('getMessage','是从子组件传来的')
        }
    }
</script>

运行结果：