vue父子组件传值

1.父组件

引入子组件

import ChoiceCitys from '../../components/choiceCitys'

components: {
    ChoiceCitys
},

<ChoiceCitys v-on:cityStr="cityStr" v-bind:sendCitys="sendCitys"></ChoiceCitys>

其中 ：v-on:cityStr="cityStr" 为子组件传过来的值。

      v-bind:sendCitys="sendCitys"为父组件发送的值，由子组件接收。

父组件写法：

cityStr(data) {
    console.log(data,'接受到的子组件值');
},

sendCitys直接赋值就好，data--return中创建该值，后面怎么赋值你随意。

子组件写法：

1.要在 props 中写出接收到父组件值的名字和他的数据类型（Number，String，Boolean，Null，undefined，object，symbol，bigInt）是啥写啥，注意大小写，注意接收值的名字和父组件设定的名字保持一致即可，然后在任意地方this.sendCitys就可以输出该值。

props: {
    sendCitys: {
        type:String
    }
}

2.父组件传来的值可以在 watch 中监听

sendCitys(newVal) {
    console.log(newVal,'接收到的父组件值');
}

3.子组件传值

this.$emit('cityStr',this.cityStr)

总之，把一些经常用到的功能做成组件，会容易开发复用，不必每个用到这个地方的页面都去重写一遍或者复制粘贴一大长串。也可使页面变得简洁。