VUE父组件、子组件的传值及获取值

import Test1 from "./test1";

import 引入的名字必须首字母大写 from '';

父组件向子组件传值：

props:

子组件：

  Vue.component('blog-post', {
      // 在 JavaScript 中是 camelCase 的
      props: ['postTitle'],//接收父组件传子组件的值
      template: '
{{ postTitle }}
'
  })

父组件引用子组件（传值写法有三种）：

传入的值可以是：数字（number）、布尔值（boolean）、数组（array）、对象（object）、

 

子组件向父组件传值：

this.$emit('valueName',value);

父组件调用：

methods:{
    function1(data){
        console.log(data）
    }//接收子组件传回的值
}

子组件：

postsomething(){
    this.$emit('function1', this.data)//向父组件传值
}

注意：

事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称

 

子组件获取父组件的值：

console.log(this.$parent)

console.log(this.$parent.value (value 为父组件data中定义的一个属性值）)

 

父组件获取子组件的值：

console.log(this.$refs.usernameInput)