组件通信
概念
各个组件间，数据，方法，都是隔离的
通过自定义属性，实现父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h1>通过自定义属性，实现父传子</h1>
<h3>父类count--{{count}}</h3>
<!-- 通过自定义属性把值带给子组件 -->
<jubu :fu_count="count"></jubu>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count:100
}
},
components: {
// 定义局部组件
jubu:{
template:`
<button @click="fu_count++">{{fu_count}}</button>
`,
props: ['fu_count']
}
}
})
app.mount('#app')
</script>
</html>
子传父(自定义事件)
子组件点击按钮=>子组件执行函数this.$emit('自定义事件名字') =》注册在组件上的【自定义事件】对应的函数执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<span>父组件接受子组件的zi_name:{{name}}</span>
<zi @get_zi_name="handleGet"></zi>
</div>
</body>
<script>
const app = Vue.createApp({
components: {
zi: {
template: `
<div>
<span>子组件zi_name：{{zi_name}}</span>
<button @click="handleClick">click</button>
</div>
`,
data() {
return {
zi_name: 'szw'
}
},
methods: {
handleClick() {
// 触发自定义事件的执行，并且传入当前组件中的zi_name
this.$emit("get_zi_name", this.zi_name)
}
}
},
},
data() {
return {
name: ''
}
},
methods: {
// 自定义方法使父组件的name赋值
handleGet(a) {
this.name = a
}
}
}
).mount("#app")
</script>
</html>
ref
组件间通信---》通过ref属性，vue提供了一个ref属性，可以放在任意标签
放在普通标签,通过 this.$refs.ref对应的名字 就能拿到原生dom对象,使用原生操作该dom
放在自定义组件上,通过 this.$refs.ref对应的名字 就能拿到 组件对象，就可以调用对象的函数，使用对象的变量
父组件中，拿到了子组件对象，对象中的属性，方法可以直接用，直接改
# 通过ref，子传父
-因为在父中，可以拿到子的对象，子对象中的所有变量，方法，都可以直接用
# 通过ref，实现父传子
-因为在父中，可以拿到子的对象， 子对象.变量=父的变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 普通标签ref -->
<span ref="fu_span">父组件的span</span>
<!-- 子组件ref -->
<zi ref="zi"></zi>
<button @click="handleClick">点击</button>
</div>
</body>
<script>
const app = Vue.createApp({
components: {
zi: {
template: `
<div>
<button @click="handleClick">click</button>
</div>
`,
data() {
return {
zi_name: 'szw'
}
},
methods: {
handleClick() {
console.log('子组件的方法');
}
}
},
},
data() {
return {
}
},
methods: {
// 自定义方法使父组件的name赋值
handleClick() {
// 拿到普通标签的dom对象
console.log(this.$refs.fu_span);
// 拿到子组件对象
this.$refs.zi.handleClick();
}
}
}
).mount("#app")
</script>
</html>
