vue父子组件传值

父向子传值： 子使用props接收父传递来的值
步骤：1. 先在父组件引入组件import son from ‘@/components/son.vue’;
2. 注册组件components:{‘v-son’:son}
3. 使用组件标签
4. 自定义属性绑定值
5. 在子组件中使用props接收传递过来的自定义属性 props: {toSonDate: String,},
6.在子组件中页面上应用{{ toSonDate }}

子传父：使用this.$emit触发传递步骤：1.先引入组件importsonfro{m}^{\prime }@/components/son.vu{e}^{\prime };2.注册组件components:{}^{\prime }v-so{n}^{\prime }:son3.使用组件标签<v-son></v-son>在子组件绑定一个事件<button@click="toFather">爸爸再给点钱</button>4.在这个事件方法中使用this.$emit监听 并且传递一个参数
toFather() {
//使用emit触发自定义事件并且传递一个参数
his.$emit(“toFather”,“爸爸不够用”)
}
5. 在父组件中绑定这个自定义方法名 然后自定义方法
@toFather="sendSon"6. 在父组件方法中接受参数、
6. sendSon(date){alert(“我是从儿子那里得到的方法”+date);}

父组件
<template>
 <view>
  <text>我是爸爸</text>
  <!-- //3.自定义属性绑定 --> 
  <!-- :toMethod="run"使用pros的方式子传父 -->
  <!-- @toFather="sendSon"使用emit方式子传父 -->
  <v-son :toSonDate="msg" :toMethod="run" @toFather="sendSon"></v-son>
 </view>
</template>
<script>
 //1.引入组件
 import son from '@/components/son.vue';
 export default {
  data() {
   return {
    msg:"零花钱"
   }
  },
  //2.注册组件     
  components:{
   'v-son':son
  },
  methods: {
   //接受子组件传递的参数
   run(date){
    alert("我是父组件中的方法"+date);
   },
   sendSon(date){
    alert("我是从儿子那里得到的方法"+date);
   }
  }
 }
</script>

子组件

<template>
 <view>
  <!-- //5.应用 -->
  我是儿子 爸爸给的{{ toSonDate }}
  <!-- 应用父组件传过来的自定义方法 子组件可以利用这个方法传参-->
  <button @click="toMethod(msg)">触发父组件的方法</button>
  <button @click="toFather">爸爸再给点钱</button>
 </view>
</template>
<script>
export default {
 data() {
  return {
   msg: '不够用'
  };
 },
 //4.使用props方法接受自定义属性
 // props:['toSonDate',"toMethod"] 方法一不能验证
 //方法二
 props: {
  toSonDate: String,
  toMethod: Function
 },
 methods: {
  toFather() {
   //使用emit触发自定义事件并且传递一个参数
   this.$emit("toFather","爸爸不够用")
  }
 }
};
</script>