vue 父组件与子组件相互通信

来源:互联网 发布:哪个软件可以听课 编辑:程序博客网 时间:2024/05/21 07:59

父组件传值到子组件

注册一个子组件,需要向子组件传值,给渲染的子组件自定义标签属性,绑定传输数据

<privateScoreTop  :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"></privateScoreTop>

msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样,Widget是传输变量,
子组件接收:

export default{  data(){  },  mothods:{  }, mounted (){  }, props:["msg"]}

通过props接收到msg属性值,在子组件里通过msg渲染数据,

<span>{{msg}}</span>

子组件传值到父组件

在子组件里

export default{    methods: {          onfilter(){             this.$emit("listenTochildEvent","browse");          },          }}

在父组件:

<privateScoreTop  :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"></privateScoreTop> showMessageFromChild(data){        alert(data);     }

通过this.$emit(),子组件像父组件传值得过程。