vue 之prop与$emit的用法

1、vue组件Prop传递数据：

组件实例的作用域是孤立的，这意味着不能在子组件的模板内直接引父组件的数据，如果要让子组件使用父组件的数据，则需要通过子组件的prop选项；prop是单向绑定的，当父组件的属性变化时，将传递给子组件，但是反过来不行；这样主要是防止子组件无意修改父组件的状态；每次父组件更新时，子组件的所有prop都会更新为最新值。这意味着你不能在子组件内部改变prop。

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg )：发送数据，第一个参数是发送数据的名称，接收时还用这个参数接收，第二个参数是这个数据现在的位置

拓展：

vm.$on( event, fn )：接收数据，第一个参数是数据的名称，与发送时的名字对应，第二个参数是一个方法，要对数据的操作

注：vue模板只能有一个根对象 (在template中只能用一个标签来包裹全部元素)不然回报错如：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

父组件：

<template>
  <div>
     <div>父组件的addName：{{addrName}}</div>
    <child-prop @showAddrName="updateAddrName" :sendData="addrName"></child-prop>
  </div>
</template>

<script>
  import childProp from "./childProp";
  export default {
    name:'index',
    components: {childProp},
    data () {
      return {
        addrName:"北京"
      }
    },
    methods:{
      updateAddrName(data){//触发子组件城市选择-选择城市的事件
        console.log(data);
        this.addrName = data.addrName;//改变了父组件的值
        console.log('toCity:'+this.addrName)
      }
    }
  }
</script>

子组件：

<template>
  <div>
    <h3>父组件传给子组件的addrName:{{sendData}}</h3>
    <br/><button @click='addr(`上海`)'>点击此处将‘上海’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'childProp',
    props:["sendData"], // 用来接收父组件传给子组件的数据
    methods:{
      addr(val) {
        let data = {
          addrName: val
        };
        this.$emit('showAddrName',data);//select事件触发后，自动触发showCityName事件
      }
    }
  }
</script>

扫描二维码关注公众号，回复： 2887437 查看本文章

vue 之prop与$emit的用法

猜你喜欢