How to set up parent-child communication in vuejs: 1. The parent component uses props to pass data to the child component; 2. The child component sends messages to the parent component through "$emit"; 3. Use ".sync" syntactic sugar; 4. Use "$attrs" and "$listeners"; 5. Use private and inject.
The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.
Vue has the following communication methods between parent and child components:
props
1, props
This is commonly used in daily development. To put it simply, we can pass data to child components through props. Just like a water pipe, the data of the parent component flows from top to bottom to the child component. , cannot flow against the flow. This is also the single data flow of Vue's design introduction.
<div id="app">
<child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
template: '<h2>{{ content }}</h2>',
props: {
content: {
type: String,
default: () => { return 'from child' }
}
}
})
new Vue({
el: '#app',
data: {
message: 'from parent'
},
components: {
Child
}
})2. $emit
The official introduction is to trigger events on the current instance, and additional parameters will be passed to the listener callback.<div id="app">
<my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
template: '<button @click="triggerClick">click</button>',
data () {
return {
greeting: 'vue.js!'
}
},
methods: {
triggerClick () {
this.$emit('greet', this.greeting)
}
}
})
new Vue({
el: '#app',
components: {
MyButton
},
methods: {
sayHi (val) {
alert('Hi, ' + val) // 'Hi, vue.js!'
}
}
})3. .sync modifier
used to exist as a two-way binding function in vue1.x, that is, the child component can modify the value in the parent component . Because it violated the design concept of one-way data flow, it was removed in vue2.x, but this .sync modifier was reintroduced in vue 2.3.0 and above. But it only exists as a compile-time syntactic sugar. It is extended as a v-on listener that automatically updates the parent component's properties. In some cases, we may need to perform "two-way binding" on a prop. Unfortunately, true two-way binding creates maintenance problems because child components can modify their parent components with no obvious source of change in either parent or child components. The syntax sugar is written in the following form<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event">
</text-document><text-document v-bind:title.sync="doc.title"></text-document>
<div id="app">
<login :name.sync="userName"></login> {{ userName }}
</div>
let Login = Vue.extend({
template: `
<div class="input-group">
<label>姓名:</label>
<input v-model="text">
</div>
`,
props: ['name'],
data () {
return {
text: ''
}
},
watch: {
text (newVal) {
this.$emit('update:name', newVal)
}
}
})
new Vue({
el: '#app',
data: {
userName: ''
},
components: {
Login
}
})this.$emit('update:name', newVal)
4, $attrs and $listeners
The official website’s support for $attrs The explanation is as follows: Contains property bindings (except class and style) that are not recognized (and obtained) as props in the parent scope. When a component does not declare any props, all parent scope bindings (except class and style) will be included here, and internal components can be passed in via v-bind="$attrs" - when creating high-level components very useful. The official website explains $listeners as follows: Contains v-on event listeners in the parent scope (without .native modifier). It can be passed into internal components via v-on="$listeners" - very useful when creating higher level components. The $attrs and $listeners attributes are like two storage boxes. One is responsible for storing attributes and the other is responsible for storing events. They both save data in the form of objects.<div id="app">
<child
:foo="foo"
:bar="bar"
@one.native="triggerOne"
@two="triggerTwo">
</child>
</div>let Child = Vue.extend({
template: '<h2>{{ foo }}</h2>',
props: ['foo'],
created () {
console.log(this.$attrs, this.$listeners)
// -> {bar: "parent bar"}
// -> {two: fn}
// 这里我们访问父组件中的 `triggerTwo` 方法
this.$listeners.two()
// -> 'two'
}
})
new Vue({
el: '#app',
data: {
foo: 'parent foo',
bar: 'parent bar'
},
components: {
Child
},
methods: {
triggerOne () {
alert('one')
},
triggerTwo () {
alert('two')
}
}
})5, private and inject
Let’s take a look at the official description of provide / inject: Provide and inject are mainly high-end plug-ins/components The library provides use cases. Not recommended for use directly in application code. And this pair of options needs to be used together to allow an ancestor component to inject a dependency into all its descendants, no matter how deep the component hierarchy is, and it will always take effect from the time the upstream and downstream relationships are established.<div id="app">
<son></son>
</div>
let Son = Vue.extend({
template: '<h2>son</h2>',
inject: {
house: {
default: '没房'
},
car: {
default: '没车'
},
money: {
// 长大工作了虽然有点钱
// 仅供生活费，需要向父母要
default: '￥4500'
}
},
created () {
console.log(this.house, this.car, this.money)
// -> '房子', '车子', '￥10000'
}
})
new Vue({
el: '#app',
provide: {
house: '房子',
car: '车子',
money: '￥10000'
},
components: {
Son
}
})vue.js Tutorial"
The above is the detailed content of How to set up parent-child communication in vuejs. For more information, please follow other related articles on the PHP Chinese website!
oracle database running sql method
How to solve 400 bad request
Why is my phone not turned off but when someone calls me it prompts me to turn it off?
What are the advantages of the Spring Boot framework?
What does b-side and c-side mean?
How to run python in vscode
How to configure phpstudy
The difference between executeupdate and execute
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
