vue element 父组件和子组件传值

Z时代
2024-01-10
分类：综合

vue

vue 父组件与子组件相互通信
一、父组件给子组件传值
      props 实现父组件向子组件传值。
1父组件里：
<child-pack  :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack>
msg是绑定的自定义属性，类似我们原生html 给标签自定义属性一样，Widget是传输变量
<script >
import childpack from './childPack.vue' //引用子组件
export default{
  name: 'FatherPack',
  components: { childpack },
  data(){
      return（）{
           myMsg：‘我是父组件参数’
       }
  },
  mothods:{
  }
}
</script>
2子组件里：
<div>
    <span>{{msg}}</span>
</div>
export default {
  name: 'ChildPack',
  props:["msg"]
 //也可以指定默认类型和默认值
 // props: {
 //    msg: {
 //       type: Number,
  //      default: 0
  //    }
 // },

// isPublic: {

// type: Boolean,

// default: undefined //注意！对于布尔类型，默认值不要写成false，否则isPublic永远为false。

// }

  data(){
  },
  created() {
     console.log（'child_msg',this.msg）
  },
  mothods:{
  },
}
二、子组件传值到父组件
this.$emit() 实现子组件向父组件传值。
1在子组件里:
export default{
    methods: {
          changeFather(){
             this.$emit("listenTochildEvent","我是子组件的参数");
          },
        //可以传递参数，参数可以是值、对象、数组等类型。
        //  changeFather(pms){ 
        //    this.$emit("listenTochildEvent",pms);
       //   },
} } 
2在父组件：定义事件listenTochildEvent，并实现showMessageFromChild方法，接收父组件传递来的参数。
<child-pack  :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack>
<script >
import childpack from './childPack.vue' //引用子组件
export default{
  name: 'FatherPack',
  components: { childpack },
  data(){
      return（）{
           myMsg：‘我是父组件参数’
       }
  },
  mothods:{
     showMessageFromChild(data){
        console.log(data);
  }
}
</script>