子传父

01===>父传子 props:["a","name"]来进行
在父亲页面可以看见 子组的值是动态的
fu.vue
{

<h2>我是父亲</h2>
<br>
<!-- 引入子组件 -->
<child a="test1" name="张三"></child>
<child a="test2" name="李四"></child>

<script>
import child from "../zi/zi" //引入子组件

export default {
components: {
child
},
data () {
return {

}
}
}
</script>

}

zi.vue
{
子组件:
<span>{{ a }} {{ name}}</span>

export default {
//自定义接口 要获取自定义属性 就在数组内 定义自定义属性的名称 接受父组件的值
// 所有被props接受到的数据 都会被挂载到this上面去
props:["a","name"]

}

}

02===>父传子 props:["a","name"]来进行
让组件里面的值 是动态的 让data来管理 通过v-bind来实现 :a="val"
zi.vue不变
fu.vue如下
{
<!-- 引入子组件 -->
<child :a="val" :name="name"></child>
<child :a="val" :name="name"></child>

<script>
import child from "../zi/zi"
export default {
components: {
child
},
data () {
return {
val:"li123 我是动态的",
name:"张三"
}
}
}
</script>
}

02===>父传子
让组件里面的值 是动态的 data是从数据库里面拿到的
zi.vue不变
fu.vue如下
{
<div v-for="(item,i) in list" :key="i"> //动态渲染
<child :a="item.name" :name="item.age"></child> //属性绑定
</div>

<script>
import child from "../zi/zi"
export default {
components: {
child
},

data () {
return {
list:[
{name:"zhang1",age:18},
{name:"zhang2",age:19},
{name:"zhang3",age:20},
]
}
}
}
</script>

}

02===》子传父 使用函数的方式 接受
zi.vue
{
<template>
<div>
子组件:
<span>hha</span>
<button @click="clickBtn"> 点我传递给父亲 </button>
</div>
</template>

export default {
data(){
return{
msg:"儿子数据 传递给父亲"
}
},

methods: {
clickBtn(){
this.$emit("getval",this.msg) //触发自定义事件 参数1:自定义事件的名称 参数2：要传递的参数
}
},
}
}

fu.vue
ps=====>在自定义组件上， 绑定的所有事件句柄（不管是静态 还是动态）都是自定义事件 不会自动触发 需要手动触发

{

<template>
<div>
父组件:
<child @getval="getzivalue"></child>
</div>
</template>

<script>
import child from "../zi/zi"
export default {
components: {
child
},
data () {
return {

}
},

methods:{
getzivalue(mess){
console.log("儿子传递过来的参数"+mess) //输出 “儿子数据 传递给父亲”
}
}
}
</script>

}

03====》面试题
1. v-if和v-show的区别？
v-if使用的是节点操作，removeChild或者appendChild
v-show使用的是css的dispaly来进行隐藏和显示

2. props和data的区别？
data是组件内部数据，由组件自己创建，自己维护
props是外部数据，由外部创建传入，由外部维护！

子传父

原文：https://www.cnblogs.com/IwishIcould/p/11300595.html