vue 组件传值

妖狐艹你老母 2022-12-15 03:39 246阅读 0赞

### 父传子 ###

*   *  一、父传子
     *   *  1.分发事件props和$emit(方法1)
         *  2.$ listeners和$ attrs(方法2)
         *  3.总线传值$ bus(方法3)组件通用
         *  4.provide和inject(方法4)
         *  5.本地存储(方法5)
         *  6.vuex(方法6)
         *  7.子组件修改父组件$ parent(方法7)
         *  8.子组件修改父组件 .sync(方法8)
     *  二、子传父
     *   *  1.分发事件$emit(方法1)
         *  2.总线传值$ bus(方法2)组件通用
         *  3.本地存储(方法3)
         *  4.作用域插槽(方法4)
         *  5.vuex(方法5)
         *  6.父组件修改子组件的值$ ref(方法6)
         *  7.父组件修改子组件的值$ children(方法7)

## 一、父传子 ##

### 1.分发事件props和$emit(方法1) ###

<child :msg="msg" ></child>

//父组件
     data() { 
        return { 
          msg: "父组件的值",
        };
      },

<div>{
       {msg}}</div>

//子组件
     props: { 
    	msg：{ 
    		type：string,
    		default:"默认"
    	}
    },

### 2.$ listeners和$ attrs(方法2) ###

<child :msg="msg" :name="name" @send="send"></child>

//父组件
     data() { 
        return { 
          msg: "父组件的值1",
          name: "父组件的值2"
        };
      },
       methods: { 
     	 send(val) { 
          this.msg = val;
        }
       }

<div>{
       {msg}}</div>
    <div>
    <button @click="update">子改父</button>
    </div>

//子组件
     props: { 
    	msg：{ 
    		type：string,
    		default:"默认"
    	}
    },
     data() { 
        return { 
          title: "子组件的值",
        };
      },
    methods: { 
    	//子改父
        update() { 
          this.$listeners.send(this.title)
        }
      },
     mounted() { 
        console.log(this.$listeners.msg.fns); //接收父组件传过来的值
        console.log(this.$attrs)//接收非prpos接收的参数(打印name)
      },

### 3.总线传值$ bus(方法3)组件通用 ###

src下面建一个bus文件，下面创建index.js  
bus/index.js

import Vue from 'vue';
    const bus = new Vue();
    export default bus;

main.js

import bus from './bus';
    Vue.prototype.$bus=bus;

任意传值组件

data() { 
        return { 
          cont: "改变之后"
        };
      },
    this.$bus.$emit("goto", this.cont);

任意接收组件

data() { 
        return { 
          far : "改变之前"
        };
      },
     this.$bus.$on("goto", data => { 
          this.far = data;
        });

### 4.provide和inject(方法4) ###

<div>{
       { msg }}</div>

//子组件
    <script>
     inject: ["msg","fns"],
      mounted() { 
        this.fns();//父组件方法
        }	
     </script>

### 5.本地存储(方法5) ###

### 6.vuex(方法6) ###

import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({ 
      namespaced: true,//开启命名空间，这个文件是单独的一个vuex模块
      state: { },//驱动应用的数据源;相当于data;
      mutations: { }, //相当于methods方法
        //所有的请求都写在actions里,响应在 view 上的用户输入导致的状态变化。
        // actions里面的方法可以传两个参数 一个参数是整个store(vuex对象)
        //第二个参数是请求的参数params 
      actions: { },//异步提交mutations
      getters:{ },//相当于computed(计算属性)
      modules: { }//模块
    });

### 7.子组件修改父组件$ parent(方法7) ###

//父组件
    data() { 
        return { 
          name : "改变之前"
        };
      },

//子组件
    //直接获取到父组件实例
    update(){ 
    	this.$parent.name="改变之后"
      }

### 8.子组件修改父组件 .sync(方法8) ###

<child :msg.sync="msg" ></child>

//父组件
     data() { 
        return { 
          msg: "父组件的值",
        };
      },

//子组件
     data() { 
        return { 
          msg: "子组件的值",
        };
      },
    methods: { 
    	//子传父
        update() { 
          this.$emit(update:"msg",this.msg)
        }
      },

## 二、子传父 ##

### 1.分发事件$emit(方法1) ###

<div>
    	<button @click="update">子传父</button>
    </div>

data() { 
        return { 
          msg: "子组件的值",
        };
      },
    //子组件
    methods: { 
    	//子传父
        update() { 
          this.$emit("send",this.msg)
        }
      },

<child :msg="msg" :></child>

data() { 
        return { 
          cont: "改变之前"
        };
      },
    //父组件
    msg(val){ 
    	this.cont=val
    }

### 2.总线传值$ bus(方法2)组件通用 ###

$bus (同上)

### 3.本地存储(方法3) ###

### 4.作用域插槽(方法4) ###

作用域插槽，主要是为了在父组件中访问子组件中的数据而提出来的一种方案，  
子组件可以通过插槽的方式传值给父组件

子组件传：

data () { 
         return { 
           msg: '我是子组件的数据'
         }
       },

父组件接收：  
scope代表整个作用域插槽，是一个形参.

<child>
       //scope代表整个作用域插槽 是一个对象，scope返回的值是slot标签上返回的所有属性值。
       //v-alot等同于#
          <template v-slot:action='scope'>
            {
       {scope.msg}}
          </template>
     </child>

### 5.vuex(方法5) ###

### 6.父组件修改子组件的值$ ref(方法6) ###

//父组件
    this.$ref.children.msg="改变之后"

data () { 
         return { 
           msg: '我是子组件的数据'
         }
       },

### 7.父组件修改子组件的值$ children(方法7) ###

//父组件
    this.$children[0].msg="改变之后"

data () { 
         return { 
           msg: '我是子组件的数据'
         }
       },