<template>
<div id="app">
<!-- 组件引入是用两个单词首字母大写的方式引入的
可以使用小写加-分割 -->
<!-- .sync 同步修饰符 语法糖 -->
<!-- ★注意这里是两个组件都在mounted里面触发方法的 -->
<!-- 两个组件加载的顺序 和你使用时候 使用顺序有关
比如child-new在前面就先执行 child-new2在后面就后执行 -->
<!-- 补充★ -->
<!-- 通过事件总线方式，我们知道了，两个组件实际上在App.vue
里面的加载是异步的，组件2里面使用created调用方法，肯定比组件1
里面使用mounted加载的块，使用事件总线是需要先监听事件，这样
自定义事件触发的时候才可以被知道 -->
<child-new
:cList="arrList"
@delItem="aDel"
ref="childnew"
:ctitle.sync="title"
@childAHandle="AHandle"
/>
<child-new2
:childval2="Aval"
/>
</div>
<!-- 通过.sync语法糖的形式
子组件修改父组件传过来的值 -->
</template>
<script>
/* import路径后面的.vue文件名可以省略 */
/* 在vue3里面不推荐使用@，推荐使用相对路径 */
import ChildNew from '@/components/ChildNew'
import ChildNew2 from '@/components/ChildNew2'
export default {
name: 'App',
components:{
ChildNew,
ChildNew2,
},
data(){
return {
title:{name:"zhangsan"},
arrList:[{
name:"张三",
age:20
},{
name:"李四",
age:30
},{
name:"王五",
age:40
}],
Aval:""
}
},
mounted(){
/* 获得子组件的dom元素 */
console.log(this.$refs.childnew);
/* 在父组件里面去操作子组件的dom元素 */
// this.$refs.childnew.$el.innerHTML = "<h1>我修改了子组件里面的元素内容</h1>"
/* 触发子组件内部的方法 */
this.$refs.childnew.toast();
/* 获取子组件内部data的属性 */
console.log(this.$refs.childnew.aa);
/* 定义一个子组件 在父组件上通过ref 把子组件的整个背景改成红色 */
this.$refs.childnew.$el.style.background = 'red';
},
methods:{
AHandle(val){
this.Aval = val;
/* console.log(this.Aval); */
},
aDel(i){
this.arrList.splice(i,1)
}
}
}
</script>
<style>
*{margin:0;padding: 0;}
</style>
网友评论