1、组件使用
1.1 子组件
Vue.component('new-component', {
props: {
'data1':{
default:[]
},
},
emits: ['newClick'],
template: `
<div @click="ok" >
</div>
`,
data () {
return {
testNo: false
}
},
watch:{
data1:{
immediate: true,
deep: true,
handler(newVal, oldVal) {
}
}
},
methods: {
ok () {
this.$emit('newClick', 1);
},
newClickItem(){
},
}
})
1.2 父组件
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Test</title>
<script src='js/vue.global.prod.js'></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app" class="bg">
<component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
</component>
<!--
<new-component ref="newcomponent" @newClick="newClick" :data1="data1" >
</new-component>
-->
</div>
<script>
const App = {
data() {
return {
data1:['1','2','3'],
tabComponent:'new-component'
}
},
mounted() {
},
methods: {
newClick(inStr){
},
newClick2(){
this.$refs.newcomponent.newClickItem();
},
}
};
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
注:
1、父组件向子组件传值
data1是传的数据
父:
<component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
</component>
子:
props: {
'data1':{
default:[]
},
},
2、父调用子组件方法
父需要定义ref,子:newClickItem子组件的方法
<component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
</component>
this.$refs.newcomponent.newClickItem();
3、子调用父组件方法
子:需要定义 emits,父:@newClick
父:
<component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
</component>
子:
emits: ['newClick'],
调用:this.$emit('newClick', 1);
4、监听父组件传值
子 immediate 立即执行,deep深度监听
watch:{
data1:{
immediate: true,
deep: true,
handler(newVal, oldVal) {
}
}
},
5、更新组件
:is 的值
<component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
</component>
6、其他
父可定义keep-alive :include 进行缓存,会触发子activated(){}
<keep-alive :include="['new-component']">
<component :is="tabComponent" ref="newcomponent" @newClick="newClick" :data1="data1">
</component>
</keep-alive>