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>
{
自定义接口 要获取自定义属性 就在数组内 定义自定义属性的名称 接受父组件的值
所有被props接受到的数据 都会被挂载到this上面去
props:["a",1)">]
}
02===>父传子 props:["a",1)">]来进行 让组件里面的值 是动态的 让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" { components: { child },1)"> { 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 {
components: {
child
},data () {
{
list:[
{name:"zhang1",age:18},{name:"zhang2",age:19
}