WEB前端程序开发Web前端之路Vue.js专区

vue 子传父/父传子 续更

2019-08-26  本文已影响0人  无枉少年

首先开门见山:

父传子

在父组件中引入子组件,然后在父组件中v-bind{函数名,要传的数值}
在子组件中需要一个接收器,props:{ 父组件的函数名}
具体操作:
父组件

import menuNav from "@/components/menuNav";  //引入子组件
 data() {
    return {
      titleName:""   //需要绑定的值
    };
  },
components: {
    menuNav  //注册组件
  },
<menuNav :titleName="titleName"></menuNav> //使用组件

子组件

 props:["titleName"]  //接收父组件传给子组件的值
<span class="f-36-p-fff">{{titleName}}</span>//绑定值
子传父

在父组件中引入子组件,然后绑定一个事件监听子组件传的值:v-on:{跟子组件传的函数名一致}="父组件函数名"
在子组件中使用this.$emit("跟父组件接收的函数名一致","要传的数值");
具体操作:
父组件

import contents from "./components/contents";  //引入子组件
data() {
    return {
      titleName:""   //data中需要接收的值,可写可不写
    };
  },
components: {
    contents   //注册组件
  },
 methods:{
    son:function(data){
      console.log(data);
      this.titleName=data;    //接收的值赋给data中,或者直接使用 {{data}}
    }
  }
<contents v-on:ListenerSon="son"></contents>   //使用子组件

子组件

mounted(){
    this.$emit("ListenerSon","绑定设备");    //传送的数值
  }
上一篇下一篇

猜你喜欢

热点阅读