grammar
1, parent component -> subcomponents: receiving data transmitted by the parent props
Step 1: parent child to receive data transmitted over the props by props key: [ 'variable name 1', ..., 'n-variable name']
Step 2: The parent to child transmission
如果穿的值为变量 Boolean或 number 类型 父必须在调用子的组件上通过语法
v-bind:子props中的变量名="父data中的键"
2, sub-assemblies -> parent component: create a custom event data sent by $ emit
Step 1: Sub create a custom event $ emit (event name, data 1, ..., data n) through grammar this.
Step 2: The parent calls the event to get data parent must trigger event @ customize things on the component invokes child = " function "
Careful 1: function is defined in the parent
carefully 2: underlying event will customize the data passed to the function parameter
Code propulsion
//子组件，发送数据
mounted() {
// 在这里面创建自定义事件 //触发自定义事件getSonData
this.$emit("getSonData", this.myName2)
},
<!-- 调用子组件 -->
<sontag @getSonData="showSonDataFn" v-bind:myName="sonName"></sontag>
<!-- 父组件接受数据 -->
methods: {
showSonDataFn(data) {
this.mySonData = data
}
},
3, Brothers components: by EventBus (event bus)
const eventBus = new Vue() // 相当于创建一个组件数据共享中心
// 发送数据： eventBus.$emit(自定义事件名称，数据1，....，数据n)
// 接受数据： eventBus.$on(自定义事件名称，处理函数)
this.$emit("sonfn" ,this.fatherName)
<son-tag :my-name="sonName" @sonfn="acceptdata"></son-tag>
Code propulsion:
the parent component -> subcomponents
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<fathertag></fathertag>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("fathertag", {
// 声明模型数据
data() {
return {
// 调用的时候注意大小写
sonName: "赵冠希"
}
},
// 声明组件内容
template: `
<fieldset>
<legend>父组件</legend>
<div>
<p>我是父组件，我儿子叫：{{sonName}}</p>
<sontag v-bind:myName="sonName"></sontag>
</div>
</fieldset>
`,
// 声明子组件
components: {
// 键就是组件标识
sontag: {
// 通过props键来获取父传递的数据
props: ['myName'],
template: `
<fieldset>
<legend>子组件</legend>
<p>我是子组件，我爸爸给我取名：{{myName}}</p>
</fieldset>
`
}
}
})
let vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
子组件->父组件
<!DOCTYPE html>
<html lang="en">
<head>
<title>神龙教主</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<fathertag></fathertag>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 自定义组件fathertag输出：
// <div><p>我是父组件，我儿子叫：赵冠希</p>【<p>我是子组件，我爸爸给我取名：赵冠希</p>】</div>
// 其中子组件sontag部分：【】
// 变量：sonName-赵冠希
// 声明fathertag组件
Vue.component("fathertag", {
// 声明模型数据
data() {
return {
// 调用的时候注意大小写
sonName: "赵冠希",
mySonData: ""
}
},
// 声明组件内容
template: `
<fieldset>
<legend>父组件</legend>
<div>
<p>我是父组件，我儿子叫：{{sonName}}</p>
<!-- 调用子组件 -->
<sontag @getSonData="showSonDataFn" v-bind:myName="sonName"></sontag>
<p>
子的数据： {{ mySonData }}
</p>
</div>
</fieldset>
`,
// 声明父普通函数
methods: {
showSonDataFn(data) {
// console.log(data)
this.mySonData = data
}
},
// 声明子组件
components: {
// 键就是组件标识
sontag: {
// 简单理解：页面加载完毕 -> 组件渲染完毕会触发下面这个键
mounted() {
// 在这里面创建自定义事件
this.$emit("getSonData", this.myName2)
},
// 通过props键来获取父传递的数据
props: ['myName'],
// 脚下留心：下props相当于下面data
data() {
return {
myName2: "神龙教主"
}
},
// 声明子组件内容
template: `
<fieldset>
<legend>子组件</legend>
<p>我是子组件，我爸爸给我取名：{{myName}}</p>
</fieldset>
`
}
}
})
let vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
兄弟组件
<!DOCTYPE html>
<html lang="en">
<head>
<title>神龙教主</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<mytag1></mytag1>
<mytag2></mytag2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建一个组件数据共享中心
const eventBus = new Vue()
Vue.component("mytag1", {
// 声明组件模型数据
data() {
return {
msg: "webopenfather",
other: 66666
}
},
// 声明组件内容
template: `
<fieldset>
<legend>兄弟1</legend>
<button @click="sendDataFn">点击传递数据</button>
</fieldset>
`,
// 声明普通方法
methods:{
sendDataFn() {
// 发送数据
eventBus.$emit("mytag1MsgData", this.msg, this.other)
}
}
})
Vue.component("mytag2", {
// 声明组件内容
template: `
<fieldset>
<legend>兄弟2</legend>
<p>{{data}}</p>
<p>{{data2}}</p>
</fieldset>
`,
// 声明自己的模型数据
data() {
return {
data: "",
data2: ""
}
},
// 组件渲染完毕触发函数
mounted() {
eventBus.$on("mytag1MsgData", (data, data2, data3) => {// 推荐写箭头函数
console.log(data)
console.log(data2)
console.log(data3)
// 将数据保存到自己的模型里面 -> 展示
this.data = data
this.data2 = data2
})
}
})
let vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
