vue父子组件通信

vue父子组件通信

1、通过porp/$emit

父传子porp：

父组件：

<template>
<!-- 父组件 -->
  <div class="about">
    <h1>父亲组件</h1>
    <p>{{ parentParams }}</p>
    <Child :message='parentParams'></Child>
  </div>
</template>

<script>
import Child from "@/views/Child";

export default {
  name: "parent",
  data() {
    return {
      parentParams: "父亲的参数",
    };
  },
  components: {
    Child,
  },
};
</script>

子组件：

<template>
<!-- 子组件 -->
  <div class="home">
    <h1>孩子组件</h1>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  name:'child',
   props:[
     'message'
   ]
 
}
</script>

子传父$emit

子组件:

<template>
<!-- 子组件 -->
  <div class="home">
    <h1>孩子组件</h1>
    <button @click="emitEvent">传值给父组件</button>
  </div>
</template>
<script>
export default {
  name:'child',
  data(){
    return{
      childeText:"儿子的参数"
    }
  },
  methods:{
    emitEvent(){
      this.$emit("handleText",this.childeText)
    }
  },
}
</script>

父组件：

<template>
<!-- 父组件 -->
  <div class="about">
    <h1>父亲组件</h1>
    <Child @handleText="handleText"></Child>
    <p>{{params}}</p>
  </div>
</template>

<script>
import Child from "@/views/Child";

export default {
  name: "parent",
  data() {
    return {
      params:""
    };
  },
  methods:{
    handleText(val){
      console.log(val);
      this.params=val
    }
  },
  components: {
    Child,
  },
};
</script>

2、provide 与 inject

父传子

父组件：

<template>
<!-- 父组件 -->
  <div class="about">
    <h1>父亲组件</h1>
    <p>{{ parentParams }}</p>
    <Child></Child>
  </div>
</template>

<script>
import Child from "@/views/Child";

export default {
  name: "parent",
  data() {
    return {
      parentParams: "父亲的参数",
    };
  },
  provide() {
    let message = this.parentParams;
    return {message};
  },
  components: {
    Child,
  },
};
</script>

子组件：

<template>
<!-- 子组件 -->
  <div class="home">
    <h1>孩子组件</h1>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  name:'child',
    
  inject:['message']
}
</script>

3、通过$parent与$children

子组件访问父组件：

<template>
<!-- 子组件 -->
  <div class="home">
    <h1>孩子组件</h1>
    <p>{{parentText}}</p>
  </div>
</template>
<script>
export default {
  name:'child',
  data(){
    return{
      childParams:'1111111'
    }
  },
  computed:{
    parentText(){
      return this.$parent.parentParams
    }
  },
}
</script>

父组件访问子组件：

<template>
  <!-- 父组件 -->
  <div class="about">
    <h1>父亲组件</h1>
    <button @click="childText">改变子组件值</button>
    <p>{{str}}</p>
    <Child></Child>
  </div>
</template>

<script>
import Child from "@/views/Child";

export default {
  name: "parent",
  data() {
    return {
      str:'',
      parentParams: "父亲的参数",
    };
  },
  methods: {
    childText() {
      this.str = this.$children[0].childParams;
      return (this.$children[0].childParams = "父组件改变了子组件的参数值");
    },
  },
  components: {
    Child,
  },
};
</script>

4、$refs给子组件传值

父组件

<template>
  <!-- 父组件 -->
  <div class="about">
    <h1>父亲组件</h1>
    <button @click="handleClick">改变子组件值</button>
    <Child ref="msg"></Child>
  </div>
</template>

<script>
import Child from "@/views/Child";

export default {
  name: "parent",
  data() {
    return {
      parentParams: "父亲的参数",
    };
  },

  methods:{
    handleClick(){
       this.$refs.msg.changeText('sss')
    }
  },
  components: {
    Child,
  },
};
</script>

子组件

<template>
  <!-- 子组件 -->
  <div class="home">
    <h1>孩子组件</h1>
    <p>{{childParams}}</p>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {
      childParams: "儿子的参数",
    };
  },
  methods: {
    changeText(m){
      this.childParams=m
    }
  },
};
</script>