vue 子传父/父传子 续更

作者: 无枉少年 | 来源:发表于2019-08-26 10:46 被阅读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","绑定设备");    //传送的数值
      }
    

    相关文章

      网友评论

        本文标题:vue 子传父/父传子 续更

        本文链接:https://www.haomeiwen.com/subject/uqfrectx.html