向组件中插入内容有2种方式
demo 使用槽点向组件中插入内容
Vue.component('Parent',{
template:` hello `
})
new Vue({
el:'#app',
template:`I am chynice to meet you `
});槽点未设置name时，使用该组件标签时，整个innerHtml都会被插入到槽点。slot是动态dom，innerHtml有多少内容，就插入多少内容。
如果不设置槽点，2个
元素不能插入到组件中。
demo 槽点设置name
Vue.component('Parent',{
template:`hello `
})
new Vue({
el:'#app',
template:`I am chynice to meet you `
});
demo 父子组件
Vue.component('Child',{
template:`I am chynice to meet you `
})
Vue.component('Parent',{
template:`hello `
})
new Vue({
el:'#app',
template:` `
});
demo 获取父|子组件对象
//子组件Vue.component('Child',{
template:`I am chynice to meet you `,
data(){return {
msg:'this is the child'}
},
mounted() { //生命周期方法，dom加载完成console.log(this.$parent); //访问父组件对象|实例 }
})// 父组件Vue.component('Parent',{
template:`hello `,
data(){return {
msg:'this is the parent'}
},
mounted() {
console.log(this.$refs.son); //访问子组件对象|实例：this.$refs.子组件的ref属性值 }
})
new Vue({
el:'#app',
template:` `
});只要当前dom中有元素使用了ref属性，就可以使用 this.$refs.ref属性值 来获取对应的实例
常用的还有
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
