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>
03===>父传子
让组件里面的值 是动态的 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>
}
