知识 | 父与子传值

参考地址1
参考地址2

父传子

父组件

image.png

子组件

image.png

子传父

子组件

image.png

父组件

image.png

父调用子组件的方法

父组件

<button @click="clickParent">点击</button>
<!--第一步：ref标注-->
<child1 ref="child1"></child1>

<script>
    import Child1 from './child1';
    export default {
        name: "parent",
        components: {
            child1: Child1
        },
        methods: {
            clickParent() {//第二步：通过ref标注调用子组件方法
                this.$refs.child1.handleParentClick("ssss");
            }
        }
    }
</script>

子组件:

<script>
    export default {
        name: "child1",
        props: "msg",
        methods: {
            handleParentClick(e) {//被父组件调用的方法
            }
        }
    }
</script>

父组件给子组件传值

子组件调用父组件的方法

父组件:

<!--第一步：把方法传给子组件-->
    <cp_action @parentMethod="macSelect"></cp_action>
 
<script>
import ../components/action  //引入子组件
export default{
    components:{
        cp_action
    },
    method:{
        macSelect(){//父组件的方法
            alert(123)；
        }
    }
}
</script>

子组件

<!--点击触发接收到的方法-->
<span class="mac-select" @click="childMethod">机选</span>
   
<script>
    export default{
      methods: {
          childMethod() {//第二步：接收父组件的方法
              console.log('请求父组件方法');
              this.$emit('parentMethod');  //使用$emit()引入父组件中的方法
          }
      },
    }
</script>