父子组件的使用

2024-03-25 19:32:52

1.父组件传值到子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
       <cpe :tgoods="goods" @btnclick="btncl" ></cpe>
</div>
<template id="cpt">
    <div>
        <button v-for="good in tgoods" @click="btnclick(good)">{{good.name}}</button>
    </div>
</template>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const  cp={
        template:"#cpt",
        props:{
            tgoods:Array
        },
        methods:{
            btnclick(item){
                //发射事件
                this.$emit("btnclick",item)
            }
        }
    }
    const app=new Vue({
        el: "#app",
        data:{
            goods:[
                {id:1,name:'1热销产品'},
                {id:2,name:'2优秀产品'},
                {id:3,name:'3优秀产品'},
                {id:4,name:'4热销产品'},
            ]
        },
        methods:({
            btncl(item){
                console.log(item)
            }
        }),
        components:{
            cpe:cp
        }
    })
</script>
</body>
</html>

步骤1：创建父组件并引用子组件

 const app=new Vue({
        el: "#app",
        data:{
            goods:[
                {id:1,name:'1热销产品'},
                {id:2,name:'2优秀产品'},
                {id:3,name:'3优秀产品'},
                {id:4,name:'4热销产品'},
            ]
        },
        methods:({
            btncl(item){
                console.log(item)
            }
        }),
        components:{
            cpe:cp
        }
    })

创建子组件

<template id="cpt">
    <div>
        <button v-for="good in tgoods" @click="btnclick(good)">{{good.name}}</button>
    </div>
</template>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const  cp={
        template:"#cpt",
        props:{
            tgoods:Array
        },
        methods:{
            btnclick(item){
                //发射事件
                this.$emit("btnclick",item)
            }
        }
    }

总结：
首先在

 <cpe :tgoods="goods"></cpe> 子组件标签中父组件的收据

然后在子组件的添加

 props:{
            tgoods:Array，
             也可以：
         cmessage:{ // 提供默认值
                type:String,  // 字符串
                default:"23", //默认值
                required:true,  //必串属性
            }
        },

对数据进行接收
就就可以实现对子组件对父组件数据的访问
2.子传父使用

 methods:{
            btnclick(item){
                //发射事件
                this.$emit("btnclick",item)
            }
        }

在引用的标签中添加

<cpe  @btnclick="btncl"  ></cpe>

父组件中调用

 methods:({
            btncl(item){
                console.log(item.name)
            }
        }),

总结
1.父传子
首先在div的模板引用时进行父组件的数据绑定
在子组件中添加props属性就完成了
注意：props中的数据名与绑定的数据名要相同
2.子传父
首先在子组件的模板中创建点击事件
然后在子组件的方法中书写方法体
在方法体中使用 this.$emit(“btnclick”,item)传递方法与参数
父组件引用模板时@btnclick="btncl"添加，然后在父组件的方法中
btncl(item){
console.log(item.name)
}
注意：方法名要相同
2.组件之间的方法调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cp ref="aaa"></cp>
    <button @click="btncl">点击事件</button>
</div>
<template id="son">
    <h1>我是子组件</h1>
</template>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const cp={
        template:'#son',
        data(){
            return{
                name:'张三',
            }
        }
    }
    const app=new Vue({
        el: "#app",
        data:{
        },
        methods:({
            btncl(){
                //使用ref可以调用子组件的方法 和参数
                console.log(this.$refs.aaa.name)
            }
        }),
        components:{
            cp
        }
    })
</script>
</body>
</html>

总结：使用$ref调用子组件中的方法或者参数
引用模板时使用

<cp ref="aaa"></cp>

方法中：调用即可
methods:({
btncl(){
//使用ref可以调用子组件的方法和参数
console.log(this.$refs.aaa.name)
}
}),

码农公寓

相关文章