• vue组件之组件间的通信


    1.组件之间的通信

    参考链接:https://www.cnblogs.com/xiaonq/p/9685234.html

    https://www.cnblogs.com/lingdu87/p/9147555.html#top


    1.1 父组件向子组件间的通信

    1、组件间的通信说明

          1. 组件间通信就是指组件之间是如何传递数据的
              父组件:vue实例化对象
              子组件:自定义组件

          2. 组件的tempalte属性,除了可以是字符串,还可以是元素的id

          3. 我们在页面中定义模板的时候,除了可以定义在script模板标签中,还可以定义在template模板中

          父组件子组件:如果你在一个组件A里面,用到了另外一个组件B,那么B就是A的子组件,A就是B的父组件

     2、父组件向子组件通信:分为以下两步

        1. 第一步

            1. 在组件容器元素上,定义自定义属性,属性值可以传递父组件中的数据

            2. 如果属性使用了v-bind指令,属性值就是js环境

            3. 如果属性没有使用v-bind指令,属性值就是字符串

             # hello 是字符串, msg是变量

        2. 第二步

            1. 在组件中定义props属性,属性值是数组,每一个成员代表组件容器元素上的一个属性

            2. 作用:将属性作为变量,注册在子组件中,可以在子组件中使用(包括模板)

            3. 注意: 如果属性名称,出现了-, 注册的变量要使用驼峰式命名法

    ​ 3、例子说明

    1. 在当页面中注册了子组件:Ickt,在子组件中是无法使用父组件中定义的数据 msg 的
    2. 如果想要在子组件Ickt中使用父组件的 msg 变量,可以使用 <ickt v-bind:parent-msg="msg">
    3. 在子组件中 使用{{parent-msg}} 就可以访问父组件的msg变量了

    ​ 父组件代码如下:

    <template>
        <div>
          <h2>{{ msg }}</h2>
             <!--3.第三步:把父组件的某一个属性传递给子组件 psMsg是名字-->
          <son :psMsg="父传子的内容:我是父组件"></son> <!-- 子组件绑定psMsg变量-->
      </div>
      </template>
    
      <script>
      import son from './Son' //1.第一步 在父组件中引入子组件
      export default {
        name: 'HelloWorld',
        data () {
          return {
            msg: '父组件',
          }
        },
          //2.第二步:在父组件中注册子组件
        components:{son},       
      }
      </script>
    

    子组件的代码如下:

    <template>
        <div class="son">
          <p>{{ sonMsg }}</p>
          <p>子组件接收到内容:{{ psMsg }}</p>
        </div>
      </template>
      <script>
      export default {
        name: "son",
        data(){
          return {
            sonMsg:'子组件',
          }
        },
          //子组件要使用父组件的数据,只需要一步,在props中接收父组件的属性
        props:['psMsg'], // 接收父组件传来的psMsg值
      }
    </script>
    

    1.2 子组件向父组件通信

     1、1.0中子组件向父组件通信分以下两步

        1. 第一步:注册事件

            在父组件的events属性中 注册消息,参数就是触发是传递的数据,作用域是组件实例化对象

        2.第二步:触发事件

            在子组件中,通过$dispatch方法触发消息

      2、2.0中改变  

    • ​ 将$dispatch, (broadcast 移除了,新增了)emit, $on, $off

                $emit发布消息

                (on 注册消息: 参数就是)emit传递的数据,作用域就是组件实例化对象

                $off 注销消息

    •   每一个组件相当于一个事件对象,只能在自身订阅,触发,以及发布

    • ​ 注意:工作中,注册事件通常在组件生命周期方法中注册,例如created

    父组件代码如下:

    <template>
        <div class="parent">
          <h2>{{ msg }}</h2>
          <p>父组件接手到的内容:{{ username }}</p>
          <!--把父组件的一个方法传递给子组件-->
          <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>  <!--绑定自定义事件transfer-->
        </div>
      </template>
      <script>
      import son from './Son'      //1.第一步 在父组件中引入子组件
      export default {
        name: 'HelloWorld',
        data () {
          return {
            msg: '父组件',
            username:'',
          }
        },
        components:{son},      //2.第二步:在父组件中注册子组件
        methods:{
          //3.第三步:在父组件中定义一个getUser方法 可以在子组件中触发并传值给父组件
          getUser(msg){      //msg是接收的子组件中传递的数据
            this.username= msg
          }
        }
      }
      </script>
    

    子组件son代码如下:

     <template>
        <div class="son">
          <p>{{ sonMsg }}</p>
          <p>子组件接收到内容:{{ psMsg }}</p>
          <!--<input type="text" v-model="user" @change="setUser">-->
          <button @click="setUser">传值</button>
        </div>
      </template>
      <script>
      export default {
        name: "son",
        data(){
          return {
            sonMsg:'子组件',
            user:'子传父的内容'
          }
        },
        props:['psMsg'],
        methods:{
          setUser:function(){
            this.$emit('transfer',this.user)//将值绑定到transfer上传递过去
          }
        }
      }
      </script>
    

    1.3通过Vuex状态管理传值


    1.通过npm加载vuex,创建store.js文件,然后在main.js中引入,store.js文件代码如下:

     import Vue from 'vue'
     import Vuex from 'vuex'
    
      Vue.use(Vuex);
      const state = {
        author:'Wise Wang'
      };
      const mutations = {
        newAuthor(state,msg){
          state.author = msg
        }
      }
      export default  new Vuex.Store({
        state,
        mutations
      })
    

    2.父组件parent代码如下:

     <template>
        <div class="parent">
          <h2>{{ msg }}</h2>
          <p>父组件接手到的内容:{{ username }}</p>
          <input type="text" v-model="inputTxt">
          <button @click="setAuthor">传参</button>
          <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>
        </div>
      </template>
      <script>
      import son from './Son'
      export default {
        name: 'HelloWorld',
        data () {
          return {
            msg: '父组件',
            username:'',
            inputTxt:''
          }
        },
        components:{son},
        methods:{
          getUser(msg){
            this.username= msg
          },
          setAuthor:function () {
            this.$store.commit('newAuthor',this.inputTxt)
          }
        }
      }
      </script>
    

    3.子组件son代码如下:

      <template>
        <div class="son">
          <p>{{ sonMsg }}</p>
          <p>子组件接收到内容:{{ psMsg }}</p>
          <p>这本书的作者是:{{ $store.state.author }}</p>
          <!--<input type="text" v-model="user" @change="setUser">-->
          <button @click="setUser">传值</button>
          </div>
      </template>
      <script>
      export default {
        name: "son",
        data(){
          return {
            sonMsg:'子组件',
            user:'子传父的内容'
          }
        },
        props:['psMsg'],
        methods:{
          setUser:function(){
            this.$emit('transfer',this.user)
          }
        }
      }
      </script>
    
    从小白到大神的蜕变~~
  • 相关阅读:
    ES6常用语法
    nodejs中exports与module.exports的区别
    CSS animation动画
    CSS user-select文本是否可复制
    VUE 滚动插件(better-scroll)
    VUE 父组件与子组件交互
    CSS div内文字显示两行,超出部分省略号显示
    linux下使用tar命令
    linux fdisk命令使用
    关于SUID、SGID、Sticky
  • 原文地址:https://www.cnblogs.com/tjw-bk/p/13753328.html
Copyright © 2020-2023  润新知