标签：Vue 子父 component prop 父子 template props 组件
父子组件通信
父亲的数据给子集
父组件向子组件传值
子组件在props中创建一个属性，用于接收父组件传过来的值；
父组件 引入子组件-->注册子组件-->引用子组件；
在子组件标签中添加子组件props中创建的属性；
将所要传递的值赋值给该属性。
props：
prop类型：通常你希望每个prop都有指定的数据类型，你可以以对象的形式列出prop，对象的属性的名称和值分别对应了prop的值和类型。
单向数据流：所有的prop都使得其父子prop形成一个单向数据流，即单向下数据流。父级prop的更新会单向流动到子组件中，但是反过来则不行，单向数据流能防止子组件意外改变父组件的状态。额外的，每次父组件发生改变时，子组件中的prop将会更新为最新的值。
- 子组件通过props选项来接收属性，接收到的属性可以像全局变量一样在组件的模板中使用
props: ['aa']- 属性验证 - js是弱类型语言
props: {
'aa': Number // String Boolean Object Array
}- vue3.0使用ts,ts是强类型
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<!-- 使用单项数据绑定将一个数据绑定给一个自定义的属性 -->
<Son :aa = "money" />
</div>
</template>
<template id="son">
<div>
<p>老爸给了我 {{ aa }} 块 </p>
<p> {{ aa + 20 }} </p>
</div>
</template>
<script>
Vue.component('Father',{
template: '#father',
data () {
return {
money: 4000
}
}
})
Vue.component('Son',{
template: '#son',
/* 子组件通过props选项来接收属性，接收到的属性可以像全局变量一样在组件的模板中使用 */
// props: ['aa']
/* 属性验证 - js是弱类型语言*/
props: {
// 'aa': Number // String Boolean Object Array
'aa': {
validator ( val ) {
return val > 3000
}
}
/* vue3.0使用ts,ts是强类型 */
}
})
new Vue({
el: '#app'
})
</script>###### 子父组件通信
子的数据给父亲
子组件向父组件传值
子组件需要以某种方式，例如点击事件的方法来触发一个自定义事件
将所需要传递的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
父组件 引入子组件-->注册子组件-->引用子组件
在子组件标签上绑定对自定事件的监听
自定义事件
父组件通过$on监听事件，事件处理函数的参数则为接收的数据
子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据
sync修饰符：对一个 prop 进行双向绑定
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<p> 儿子给我发了 {{ xiaojinku }} 的红包 </p>
<!-- 自定义事件 -->
<Son @hongbao = "get"/>
</div>
</template>
<template id="son">
<div>
<button @click = "give"> 发红包 </button>
</div>
</template>
</body>
<script>
Vue.component('Father',{
template: '#father',
data () {
return {
xiaojinku: 0
}
},
methods: {
get ( val ) {
this.xiaojinku = val
}
}
})
Vue.component('Son',{
template: '#son',
data () {
return {
hongbao: 2000
}
},
methods: {
give () {
this.$emit('hongbao',this.hongbao)
}
}
})
new Vue({
el: '#app'
})
</script>
非父子组件通信（兄弟姐妹通信）
兄弟通信 找父作为中间值
子传父->父传子
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3> father组件 </h3>
<hr>
<!-- 使用自定义属性形式将一个方法传递给子组件 -->
<Girl></Girl>
<hr>
<Son></Son>
</div>
</template>
<template id="son">
<div>
<h3> son组件 </h3>
<img v-if = "flag" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3872048339,4140466773&fm=26&gp=0.jpg" alt="">
<img v-else src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2438534582,3797477605&fm=26&gp=0.jpg" alt="">
</div>
</template>
<template id="girl">
<div>
<h3> girl组件 </h3>
<button @click = "hit"> 揍弟弟 </button>
</div>
</template>
</body>
<script>
/* 定义了实例bus - bus上有 $on $emit */
var bus = new Vue()
Vue.component('Father',{
template: '#father',
})
Vue.component('Son',{
template: '#son',
/* 组件是独立的，自己的数据自己改 */
data () {
return {
flag: true
}
},
mounted () {
/* mounted表示挂载结束，也就是我们能看到界面了，也就是事情做完了 */
/* 这个函数会自动执行 */
var _this = this
/* 通过bus绑定了自定义事件 */
bus.$on('ku',function () {
_this.flag = !_this.flag
})
}
})
Vue.component('Girl',{
template: '#girl',
methods: {
hit () {
bus.$emit('ku')
}
}
})
new Vue({
el: '#app'
})
标签：Vue,子父,component,prop,父子,template,props,组件 来源： https://www.cnblogs.com/hff-syt/p/11730207.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。