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

import Test1 from "./test1";

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

父组件向子组件传值：

props:

子组件：

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

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

<blog-post post-title="hello!"></blog-post>

<blog-post :post-title="hello!"></blog-post>

<blog-post v-bind:post-title="hello!"></blog-post>

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

子组件向父组件传值：

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

父组件调用：

<zujian-name @function1="function1" :someOpt="someOpt" ></zujian-name>

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

子组件：

<div @click="postsomething（）"></div>
postsomething(){
    this.$emit('function1', this.data)//向父组件传值
}

注意：

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

子组件获取父组件的值：

console.log(this.$parent)

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

父组件获取子组件的值：

<Test1 ref="usernameInput"></Test1>

console.log(this.$refs.usernameInput)