vue2使用组件进行父子互相传值的sync语法糖方法和原生方法

乎语百科 2022-10-13 21:55:37 500 0

原生方法：（事件名可以不在props通道里）

子类通过props通道绑定父类里data里的jjjjjj（@:fefefeff='jjjjjjjjjjjjj'）

父组件通过监听fefeff事件来把子类传来的数据传给父组件里的jjjjjj，又因为通过props绑定了，所以也就实现了父子传值（@fefefeff="bol=>jjjjjjjjjjjjjj=bol）

语法糖方法：（事件名必须是在props通道中）

父组件使用@:fefefeff.sync ，则子组件需要在事件名前加update，事件名必须是在props通道中

父组件

<template>
    <div>
        <input type="button" value="我是父组件中的按钮" @click="show">

        <child :fefefeff.sync="jjjjjjjjjjjjjj"  ></child>

        <!--2.fefeff是子类emit的事件在父里监听  1.fefefeff是子类里的，通过props传过来绑定到jjjjjj点击后为父组件data里的jjjjj-->
        <!-- <child   @ccccc="bol=>jjjjjjjjjjjjjj=bol"  :fefefeff='jjjjjjjjjjjjjj'></child> -->
    </div>
</template>
<script>

    import child from "@/components/child"
    export default {
        data() {
            return {
                jjjjjjjjjjjjjj:'我是父组件绑给子组件的',
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.jjjjjjjjjjjjjj='我是父传过来的';
            },
        }
    }
</script>

子组件

<template>
  <div>
    <div>
      我是一个子组件，我出现了！！！！！！！
      <!-- <input type="button" value="点我隐身" @click="upIsShow"> -->
      <!-- 点击后传值给父（bol = false） -->
      <input type="button" value="点我传值" @click="myShow" />
      <h1>{{fefefeff}}</h1>
    </div>
  </div>
</template>
<script>
export default {
  props: ["fefefeff"],
  methods: {
    myShow() {
      this.$emit("fefefeff", "我是子传过来的");
      this.$emit("ccccc", "我是子传过来的");
    //   使用sync 需要加语法糖update:事件名进行传值
      this.$emit("update:fefefeff", "我是子传过来的");
    },
  },
};
</script>

标签： # vue