Vue知识点整理（二）组件开发

Chen_leilei

于 2022-01-02 11:19:28 发布

阅读量471

点赞数

分类专栏： Vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/Chen_leilei/article/details/122274540

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1组件
   //扩展html元素，封装可重用代码
// Vue.component
//组件编写与Vue实例的区别
//自定义组件需要有一个root element
//父子组件的data是无法共享的
//组件可以有data,method,computed 但是 data必须是一个函数
Vue.component("navbar",{
template:`<div style="background:yellow">
<button @click="handleClick()">返回</button>
{{navbarname}}
<button>首页</button>
<child></child>
<navbarchild></navbarchild>
</div>`,
methods: {
handleClick(){
alert("返回")
}
},
data(){
return {
navbarname:"navbarname"
}
},
//局部定义组件
components:{
navbarchild:{
template:`<div>navbarchild----只能在navbar中使用</div>`
}
}
})
2.父组件传子组件（使用动态绑定）
   -如果想传递一个对象的话使用动态绑定
   //属性验证校验一下父组件传过来的值是否符合属性 null为不限制类型

<navbar :myname="parentname" :myshow="true"></navbar>
props:{
myname:String,
myshow:Boolean
}

3.子组件传递父组件
子传父用的是事件向上传，
在子组件中调用 this.$emit("父组件中的方法")

<body>
    <div id="box">
        父组件
        <child @myevent="handleEvent($event)"></child>
    </div>
</body>
<script>
    Vue.component('child', {
        template: `<div>
                        child子组件
                        <button @click="paymoney()">click</button>
                        </div>`,
        data() {
            return {
                chilrdName: "子组件得状态"
            }
        },
        methods:{
            paymoney(){
                this.$emit("myevent",this.chilrdName) //分发事件
            }
           
        }
    })
    new Vue({
        el: '#box',
        methods: {
            handleEvent(ev) {
                console.log("父组件收到钱了"+ev)
            }
        }
    })
</script>

4.ref通信
ref 放在标签上是一个原生节点
ref 放在组件上，是一个组件对象
点击完会获取组件的对象。通过this.$refs.组件名.组件中的方法可以调用组件中的方法。

this.$refs.mychild.add("");父组件获取子组件里面的add()方法

5.非父子组件的通信
（1）.//中央事件总线
var bus = new Vue();//一个空的Vue实例就i是中央事件总线
（2）. //一个组件推送一个消息
bus.$emit("weixinmessage",this.$refs.mytext.value);
（3）在另一个一个组件的合适的地方进行监听
//这是一个生命周期函数
mounted() {
//用总线进行监听
bus.$on("weixinmessage",(data)=>{
console.log("收到推送"+data)
})
console.log("生命周期函数，当前组件dom创建完成就会调用")
}

6.动态组件使用:is

<keep-alive>

</keep-alive>

7.slot 插槽
<!--前景，想在组件中添加一个div,但是会被template完全覆盖，这时候，
在孩子组件中添加一个<slot>标签，插槽就是预留的位置，
slot 内容分发把父组件的内容分发到孩子组件中
目的：就是把父组件的内容与子组件的内容进行混合
为什么要这么写？写死不行么?
在其他页面也需要的时候，写死就不行了,组件使用别人的，数据使用自己的，就是不知道以后要写什么，预留出来的

改造子传父

在child里想把111放在child上面，把222放在child下面
使用具名插槽具有名字的插槽
<child>
<div slot="a">1111</div>
<div slot="b">222</div>
</child>