简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值

1、组件的定义

组成：
- template：包裹HTML模板片段（反映了数据与最终呈现给用户视图之间的映射关系）
  - 只支持单个template标签；
  - 支持lang配置多种模板语法；
- script：配置Vue和载入其他组件或者依赖库
  - 只支持单个script标签；
  - 支持通过import方式载入其他.vue后缀的组件文件；
- style：设置样式
  - 支持多个style标签；
  - 支持scoped属性，css只应用于当前组件的元素中；
  - 支持lang配置多种预编译语法；
局部组件：这里是一个三级地址组件
- 首先看一下目录：在./src/components/下面新建立一个文件夹，此时命名为chinaAddress，在里面建立入口文件index.js，将你写好的组件通过import导入

在index.js里面进行全局注册组件；install是一个默认的方法

import chinaAddress from './src/main';

/* istanbul ignore next */

chinaAddress.install = function(Vue) {

    Vue.component(chinaAddress.name, chinaAddress);

};

export default chinaAddress;

src里面的main.vue代码如下：

<template>

    <div class="area">

        <el-select v-model="provinceCode" :placeholder="$t('message.common.province')" class="select" clearable @clear="clear">

            <el-option v-for="item in provinceList" :key="item.value" :label="item.name" :value="item.value">

            </el-option>

        </el-select>

        <div>&nbsp;{{$t('message.common.provinceOrDirectly')}}&nbsp;</div>

        <el-select v-model="cityCode" :placeholder="$t('message.common.city')" class="select">

            <el-option v-for="item in cityList" :key="item.value" :label="item.name" :value="item.value">

            </el-option>

        </el-select>

        <div>&nbsp;{{$t('message.common.city')}}&nbsp;</div>

        <el-select v-model="countryCode" :placeholder="$t('message.common.country')" class="select">

            <el-option v-for="item in countryList" :key="item.value" :label="item.name" :value="item.value">

            </el-option>

        </el-select>

        <div>&nbsp;{{$t('message.common.districtOrCountry')}}&nbsp;</div>

    </div>

</template>

<script>

import chinaAddressData from './chinaAddressData'

export default {

    name: 'chinaAddress',

    data() {

        return {

            provinceCode: '', //省code

            cityCode: '', //市code

            countryCode: '', //县code

            provinceList: [], //省表数据

            cityList: [], //具体省下面市列表数据

            countryList: [], //具体市下面县列表数据

            addressCode: [], //组件内部省市县code数组

        }

    },

    props: {

        value: {

            type: Array,

            default () {

                return []

            }

        },

    },

    computed: {

    },

    components: {

    },

    watch: {

        value(newVal, oldVal) {

            if (newVal.length) {

                const [provinceCode, cityCode, countryCode] = newVal

                this.provinceCode = provinceCode ? provinceCode : ''

                this.cityCode = cityCode ? cityCode : ''

                this.countryCode = countryCode ? countryCode : ''

            }

        },

        provinceCode(newVal, oldVal) {

            if (newVal) {

                this.cityList = chinaAddressData.filter(val => val.parent === newVal)

                this.cityCode = this.cityList[0].value

            }

            this.emitValueChange()

        },

        cityCode(newVal, oldVal) {

            if (newVal) {

                this.countryList = chinaAddressData.filter(val => val.parent === newVal)

                this.countryCode = this.countryList[0].value

            }

            this.emitValueChange()

        },

        countryCode(newVal, oldVal) {

            this.emitValueChange()

        }

    },

    mounted() {

    },

    created() {

        this.provinceList = chinaAddressData.filter(val => !val.parent)

    },

    methods: {

        emitValueChange() {

            this.$nextTick(() => {

                this.addressCode = [].concat(this.provinceCode, this.cityCode, this.countryCode).filter(val => val)

                this.$emit('input', this.addressCode)

                const addressInfo = {

                    provinceCode: '',

                    provinceName: '',

                    cityCode: '',

                    cityName: '',

                    countryCode: '',

                    countryName: '',

                }

                if (this.addressCode.length) {

                    const [provinceCode, cityCode, countryCode] = this.addressCode

                    addressInfo.provinceCode = provinceCode

                    addressInfo.cityCode = cityCode

                    addressInfo.countryCode = countryCode

                    addressInfo.provinceName = chinaAddressData.find(val => val.value === provinceCode)['name']

                    addressInfo.cityName = chinaAddressData.find(val => val.value === cityCode)['name']

                    addressInfo.countryName = chinaAddressData.find(val => val.value === countryCode)['name']

                }

                this.$emit('change', addressInfo)

            })

        },

        clear() {

            this.provinceCode = ''

            this.cityCode = ''

            this.countryCode = ''

            this.emitValueChange()

        }

    },

}

</script>

<style lang="scss" scoped>

.area {

    width: 100%;

    display: flex;

   .select {

       width: 26%;

   }

}

</style>

js文件为：

在main.js里面进行全局注册：（没有这一步，这是全局组件）
```
import   chinaAddress from 'url';

Vue.use(chinaAddress)
```

在组件里面使用：

<china-address v-model="addressCodeList" @change="addressChange"></china-address>

局部组件的步骤如下：

定义：

var com = {

//局部组件的定义,当名字为驼峰式命名myCom   写成<my-com></my-com>

   template: "<div>局部组件com{{msg}}</div>",

   data() {//每个组件的实例都有独立的数据

     return {

        msg: "hello",

        n: this.v

     };

   },

    methods: {}

};

全局组件：

定义：

Vue.component("组件的名字",{

    template:"模板的内容"(换行时用模板字符串``)//配置项

})

2、数据传递方式（组件通信）

props传值（$parent以及$children）这两种方式只能用于父子组件之间的通信

父子组件之间的传值

父组件 -----> 子组件（参考资料https://www.cnblogs.com/Sky-Ice/p/9267192.html）

子组件不能修改父组件传递过来的值，因为数据时单向的（参考资料https://www.cnblogs.com/Sky-Ice/p/10456533.html）

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得
难以理解。

解决办法：

　原理：将要更改的值，传递给父组件，在父组件中更改，再传递给子组件

步骤：

　先将值传递给子组件，子组件 props 接收并使用，然后通过 $emit 广播一个事件给父组件，并将值一并传递，父组件 @子组件广播过来的事件，
并定义一个方法，在该方法中，改变传递过来的值，父组件又会将值传递给子组件，这样就形成了一个闭环，问题得以解决

传值：

在父组件上用v-bind绑定要传递的属性，若没有v-bind，则属性的值始终是 字符串 v-bind:v="msg"

<template>

  <div id="example" style="margin-bottom:200px">

    我是首页

    <hr />这里是分界线

    <Header v-bind:v="msg"></Header>

  </div>

</template>

<script>

import Header from "./header";

export default {

  name: "example",

  data() {

    return {

      msg: "我是你爸爸"

    };

  },

  components: {

    Header,//子组件

  },

  methods: {},

  mounted() {}

};

</script>

在子组件上用props属性进行接收：

对象方式：（验证）

props:{

    v : {

      type : String,//null表示可以为任意类型，Number为数值型，Object为一个对象，

      default : 'hello',//不传之时指定默认值

      required : true,//不传值则产生错误
      twoWay : true，//如果绑定类型不对将发出警告

    }

  },

数组方式：props : ["v"]

<template>

  <div id="header">

    <p>我是父组件传递过来的数据：{{v}}</p>

  </div>

</template>

<script>

export default {

  props:["v"],

  name: "thesisHeader",

  data() {

    return {

      search: "", //搜索框内容

    };

  },

  methods: {},

};

传方法：
- 在使用子组件时，根据传值的方式将方法进行绑定，:run="run";
- 在子组件中，依旧使用props进行接收，this.run()运行；
- 子组件还可以用这种方式调用父组件的 this.$parent.方法/属性
传父组件本身：
- 在父组件中，使用子组件时，动态绑定this，即:home="this";
- 子组件接收props:["home"];
- 子组件使用：this.home.父组件的属性或者方法

子组件 -----> 父组件（参考资料https://www.cnblogs.com/Sky-Ice/p/9289922.html）

步骤：

依旧是父组件Home

<template>

  <div>

    <div

      id="example"

      style="width:200px;height:200px;background:#ff0;font-size:25px;line-height:200px;text-align:center;margin:20px"

    >我是父组件</div>

    <Header></Header>

  </div>

</template>

<script>

import Header from "./header";

export default {

  name: "example",

  data() {

    return {

      msg: "我是你爸爸"

    };

  },

  components: {

    Header //子组件

  },

  methods: {},

  mounted() {}

};

</script>

与子组件Header

<template>

  <div id="header">

    <div

      style="width:200px;height:200px;background:pink;font-size:25px;padding-top:100px;text-align:center;margin:20px"

    >我是子组件</div>

    <button @click="give">给父组件传值</button>

  </div>

</template>

<script>

export default {

  name: "thesisHeader",

  data() {

    return {

      msg: "爸爸，我是您的宝贝女儿啊！"

    };

  },

  methods: {

    give(){

    }

  },

  mounted() {}

};

子组件发送数据

 give() {

      this.$emit("receive", { msg: this.msg });//$emit用来触发自定义事件，第一个参数是事件的名称，第二个参数是传递给监听事件的数据

 }

父组件在使用子组件的地方进行监听
```
<Header @receive="getData"></Header>
```

接收数据，并进行处理

getData(data){

    console.log(data)//{msg: "爸爸，我是您的宝贝女儿啊！"}

}

同理：传方法与自身都可以，像父组件给子组件的形式当然，父组件还可以这么调用 this.$refs.名字.属性/方法

//传方法 
myMethod() {

   alert("我是属于子组件的方法");

 },

 give() {

   this.$emit("receive", { msg: this.msg, myMethod: this.myMethod });

 }
结果：{msg: "爸爸，我是您的宝贝女儿啊！", myMethod: ƒ}  data.myMethod()执行

//传组件本身
give() {

   this.$emit("receive", { header: this });

}
//父组件的接收处理方法

getData(data){

console.log(data.header)//子组件本身

console.log(data.header.msg)//子组件属性

data.header.myMethod()//子组件方法

}

父子组件通信的练习：

父组件

<template>

  <div>

    <div

      id="example"

      style="width:200px;height:200px;background:#ff0;font-size:25px;line-height:200px;text-align:center;margin:20px"

    >我是父组件</div>

    <Header @receive="getData" :message="msg"></Header>

  </div>

</template>

<script>

import Header from "./header";

export default {

  name: "example",

  data() {

    return {

      msg: "我是你爸爸"

    };

  },

  components: {

    Header //子组件

  },

  methods: {

    getData(data){

      this.msg = data.changeMessage;

    }

  },

  mounted() {}

};

子组件

<template>

  <div id="header">

    <div

      style="width:200px;height:200px;background:pink;font-size:25px;padding-top:100px;text-align:center;margin:20px"

    >我是子组件

    <p>爸爸说:{{message}}</p>

    </div>

    <button @click="give">给父组件传值</button>

  </div>

</template>

<script>

export default {

  props:["message"],

  name: "thesisHeader",

  data() {

    return {

      msg: "爸爸，我是您的宝贝女儿啊！"

    };

  },

  methods: {

    myMethod() {

      alert("我是属于子组件的方法");

    },

    give() {

      this.$emit("receive", {changeMessage : "照顾好自己"});

    }

  },

  mounted() {}

};

</script>

非父子组件之间的通信

provide/inject

provide/ inject 是vue2..0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。这里不论子组件嵌套有多深, 
只要调用了inject 那么就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中回去数据

ref/refs

eventBus（ bus是空的vue的实例，把它放在根组件的data里面，并且bus上面有两个方法$emit,$on）

eventBus 又称为事件总线，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。

缺点：当项目较大,就容易造成难以维护的灾难；

使用步骤

在父组件中，存在两个兄弟组件，父组件A的代码为：

<template>

  <div class="parent">

    <son></son>

    <grand-son></grand-son>

  </div>

</template>

<script>

import son from "./son";

import grandSon from "./grandson";

export default {

  name: "parent",

  data() {

    return {};

  },

  components: {

    son,

    grandSon

  },

  methods: {}

};

</script>

<style scoped>

</style>

在子组件son中通过$emit发送事件

<template>

  <div class="son">

    <p @click="handler">我要告诉我的弟弟，我多大了</p>

  </div>

</template>

<script>

import eventBus from "../../eventBus/bus";

export default {

  name: "son",

  data() {

    return {

      age: ""

    };

  },

  methods: {

    handler() {

      eventBus.$emit("handlerData", { data: this.age });

    }

  }

};

在另一个子组件中通过$on来监听接收到的消息

<template>

  <div class="grandson">我的哥哥今年{{age}}岁了</div>

</template>

<script>

import eventBus from "../../eventBus/bus";

export default {

  name: "",

  data() {

    return {

      age: ""

    };

  },

  // inject: ["age"],

  methods: {},

  mounted() {

    eventBus.$on("handlerData", data => {

      this.age = data.data;

    });

  }

};

</script>

<style scoped>

</style>

如果想移除事件，通过
eventBus.$off('事件名称'，{})

vuex

　　　　　　　　可以参考本博客写的，如果使用vuex：https://www.cnblogs.com/wxh0929/p/11984417.html

localStorage与sessionStorage

实现方式

window.localStorage.setItem(key,keyValue);

window.localStorage.getItem(key)

优点：代码实现简单，通信比较容易；缺点：数据和状态比较混乱，不太容易进行维护；

注意：

注意用JSON.parse() / JSON.stringify() 做数据格式转换 localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决

数据和状态混乱问题.

组件通信
slot分发内容

3、混合

作用：实现代码抽离复用

    eg:当创建了多个vue对象，都要用到一个方法，不应该将这个方法复制到每个对象的methods里面，应该采用'mixin'

    <script>

        var myMixin = {

            methods : {//公共方法

               test(){console.log(test)}

            }

        }

        var vm1 = new Vue({

            el : "#box",

            mixins : [myMixin],

            template:{}

        })

        var vm2 = new Vue({...})//box2

    </script>

注意：在混合的过程当中，如果出现同名的钩子函数，两者都会被调用，而混合的钩子函数在自己的钩子函数前面执行；

如果出现同名的methods、components等值为对象的选项时，则自己组件的选项优先（只执行自己组件内的）；

4、动态组件（参考资料https://www.cnblogs.com/xiaohuochai/p/7395694.html）

定义：多个组件使用同一个挂载点，然后动态的在它们之间切换；我们可以使用保留的<component>元素，动态的绑定到它的is属性；

<template>

  <div id="home">

    <el-radio-group v-model="checkId" @change="change">

      <el-radio label="Header">头部</el-radio>

      <el-radio label="Footer">底部</el-radio>

    </el-radio-group>

    <div class="checkComponent">

      <component :is="checkId"></component>

    </div>

  </div>

</template>

  </div>

</template>

<script>

import Header from "./header";

import Footer from "./footer";

export default {

  name: "example",

  data() {

    return {

      checkId: "Header"

    };

  },

  components: {

    Header, //子组件

    Footer

  },

  methods: {

    change(value) {

      this.checkId = value;

    }

  }

};

</script>

特点

缓存：<keep-alive>包裹动态组件时，可以把切换出去的组件保留在内存中，而不是销毁，从而保留它的状态或者避免重复渲染DOM，提高性能；

<template>

  <div id="home">

    <el-radio-group v-model="checkId" @change="change">

      <el-radio label="Header">头部</el-radio>

      <el-radio label="Footer">底部</el-radio>

    </el-radio-group>

    <div class="checkComponent">

      <keep-alive>

        <component :is="checkId"></component>

      </keep-alive>

    </div>

  </div>

</template>

  </div>

</template>

<script>

import Header from "./header";

import Footer from "./footer";

export default {

  name: "example",

  data() {

    return {

      checkId: "Header"

    };

  },

  components: {

    Header, //子组件

    Footer

  },

  methods: {

    change(value) {

      this.checkId = value;

    }

  }

};

</script>

include和exclude属性允许组件有条件的缓存
```
 <keep-alive include="Header">//只缓存header   footer不缓存，如果要缓存多个，用逗号分隔

   <component :is="checkId"></component>

 </keep-alive>
```
- 字符串方式：include = "a,b"
- 数组方式：v-bind:include = [ "a"，“b” ]
- 正则方式：v-bind:include = "/a | b /";
activated和deactivated钩子函数
- 定义：使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务；

参考资料：https://www.jianshu.com/p/0b0222954483 组件实际应用：实现组件的有条件缓冲

5、遇到的问题

秒客网

简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值

相关文章