今天还在学习Vue。对于父子组件之间的通信还有一些地方没有弄清楚。父子组件间通信可使用props, ref这几个知识点进行通信。
- 关于props
子组件的props选项可接收来自父组件的数据;
子组件：
<template>
<h3>{{message}}</h3>
</template>
<script>
export default{
props：['message'] //声明一个自定义属性
}
</script>
父组件(示例静态传递)：
<template>
<div>
<h2>我是父组件！</h2>
<child message="我是父组件传递的信息！"></child>
</div>
</template>
<script>
import child from './child.vue' //引入组件
export default{
components:{ child}, //注册子组件
}
</script>
2.关于$emit
首先我们从官方文档里面可以知道，子组件可以使用props 选项接收父组件的数据；
prop是单向数据流，从父组件流向子组件，子组件要是想更改父组件中的数据，可以使用 $emit 触发父组件的自定义事件：
vm.$emit(event, arg) //$emit绑定一个自定义事件event ,当该语句被执行到的时候，会将参数arg抛出传递给父组件，父组件通过@event监听并接收参数，然后可通过$event访问到子组件抛出的arg参数；
**假如在父组件中事件处理函数是一个方法，则arg代表的值会作为第一个参数传入这个方法：**(见下面例子)
vm.$on(event, fn) //监听event事件后运行fn;
举个栗子->子组件：
<template>
<div class="train-city">
<h3>父组件传给子组件的toCity:{{sendData}}</h3>
<br/><button v-on:click="select('山东')">点击此处将“山东”发送给父组件</button>
</div>
</template>
<script>
export default{
name: 'trainCity',
props: ['sendData'], //用来接收父组件传给子组件的 数据
methods:{
select(val){
let data={
cityname: val
};
this.$emit("showCityName", data); //select事件触发以后，自动触发showCityName事件
}
}
}
</script>```
父组件：
<template>
<div>
<div>父组件的toCity{{toCity}}</div>
<train-city v-on:showCityName="updateCity" v-bind:sendData="toCity"></train-city> //使用子组件 prop动态传递数据 事件处理函数是一个方法，自动接收子组件传过来的arg并传给函数作为第一个参数，虽然没有用$event接收子组件传过来的值
</div>
</template>
<script>
import trainCity from "./train-city";
export default{
name: "index",
components:{trainCity},
data(){
return{
toCity: 'beijing'
}
},
methods:{
updateCity(){ //触发子组件
this.toCity = data.cityname; //改变了父组件的值
console.log("toCity:" + this.toCity)
}
}
}
</script>
- $ref
在父级组件中想要直接访问一个子组件的时候，可通过ref属性给子组件赋予一个ID引用。在父组件中： <base-input ref="usernameInput"></base-input>
可以使用 this.$refs.usernameInput 访问<base-input>组件实例。
网友评论