VUE父子组件传值基本原理

1.首先定义一个父组件 假设为helloword.vue

2.定义一个子组件   假设为one.vue

在父组件中：把子组件都加载进来三部曲

1.import one from "../components/one";

 

2.  components: {

    one,

}

3.<one></one>

3. <one :fatherData='text'></one> //最后写成，因为fatherData='text 是由于接收父组件的值，需要显示才写成这样

 

假设定义父组件一个值text：

  return {

      text:'父组件的值',

}

那么，怎么把这个值丢给他儿子（one）呢?

我们需要到子组件，使用props：["fatherData"], 接收触发的$emit 就行

代码：

props接收数据

export default {

  name: "one",

  props:["fatherData"],

 

v-model绑定数据

<input type="text" v-model="fatherData">