App.vue is a parent component, and then Test and HelloWord, these two are actually child components. Here, the value of the parent component msg is passed to the child component.
<HelloWorld msg="Welcome to Your Vue.js App"/>The data between components is to be passed to each other. The components here are child components and parent components for the entire page.
The parent component needs to pass data into the child component, because sometimes the page display content of the child component is determined by your parent component. When the parent component passes parameters to the child component, it determines what content the child component passes.
How does the parent component pass data to the child component? Just define the props attribute in the subcomponent.
<script>
export default {
name: 'HelloWorld', //当前页面的名称
//props定义了父组件传递给子组件的数据
props: {
msg: String
}
}
</script>
或者下面写法也行
export default {
name: 'HelloWorld',
props: {
msg: {
Type: String,
default: ''
}
}
}When you define the props passed from the parent component to the child component in the sub-component, you don’t need to declare it in the data of the sub-component after the definition, you can use it directly and put this value in the template.
<template>
<div class="hello">
<h1>{
{ msg }}</h1>HelloWord.vue this component, this page, this view. This header is defined by the parent component App.vue
<template>
<!--<img alt="Vue logo" src="./assets/logo.png">-->
<!--在下方局部注册了之后，就可以在vue文件当中使用-->
<HelloWorld msg="这个是父组件定义的标题页"/>
<div>
<!--在mianjs全局注册后，即可通过组件名称全局使用-->
<Test></Test>
</div>
</template>
If you don't want to write hard, you can use v-bind. After using v-bind earlier, you can pass the variables in the data attribute when = "". If you don't use v-bind, then "" must be written to death, and variables cannot be written.
<HelloWorld :msg="msg"/>app.vue
<template>
<Test v-bind:name="name" :content=content></Test>
</template>
<script>
export default {
name: 'App',
data(){
return{
name: "lucas very good",
content: false
}
}
}
</script>Test.view
<template>
<div>
<button type="button" @click="btn()">Test按钮</button>
<p>content value:{
{ content }}</p>
<p>name value:{
{ name }}</p>
</div>
</template>
<script>
export default ({
//定义父亲组件传递给子组件的数据，属性名为test，类型为string
props:{
name: String,
content: Boolean
},
data() {
return{
}
},
methods:{
btn(){
//在js中使用props数据
console.log(this.content)
console.log(this.name)
console.log("test按钮点击之后效果")
}
}
})
</script>
emit from child to father (child component calls parent component method)
Define an event by means of this.emit, and then put the data into the event. Listen to the childmsg event in the parent component, bind the receive method, and receive the parameters passed by the child component through the receive method. (In fact, an event occurs in the child component. This event is defined by emit, and finally listened in the parent component. After listening to the event, the corresponding data is obtained in the method)
It is relatively simple for father to son, and son to father needs to define a method to accept it.
<template>
<!--@是监听事件的，它就是监听childmsg的一个事件-->
<Test v-bind:name="name" :content=content @childMsg="receive"></Test>
</template>
<script>
export default {
name: 'App',
data(){
return{
name: "lucas very good",
content: false
}
},
methods:{
receive(data){
alert(data)
console.log(data)
}
}
}
</script><template>
<div>
<button type="button" @click="btn()">Test按钮</button>
<button type="button" @click="btn1()">传递数据到父组件</button>
<p>content value:{
{ content }}</p>
<p>name value:{
{ name }}</p>
</div>
</template>
<script>
export default ({
props:{
name: String,
content: Boolean
},
data() {
return{
Msg: "你好，我是子组件数据！"
}
},
methods:{
btn(){
console.log(this.name)
console.log(this.content)
},
btn1(){
//this.$emit用于将子组件的数据传递给父组件
//第一个参数表示父组件接受的方法，第二个参数表示具体传递的值
//emit就是子组件调用父组件的方法,这里触发了childMsg事件
this.$emit('childMsg',this.Msg)
}
}
})
</script>