vue电商实战笔记（第四章）

App.vue文件：

<template>
 <div>
   <!--例子1-->
   <!--这里采用了父子组件间的通信，在父组件中声明了一个number属性，在子组件中通过props接受该属性-->
   <mycomponentC number="34"></mycomponentC>
   <!--例子4这里采用的是动态从父组件中传值,加了v-model后需要传递的值是数字，不能是其他类型-->
   <input type="text" v-model.number="myVal">
   <!--例子5通过emit来监听子组件实现传递数组-->
   <!--通过监听子组件的自定义事件来给父组件传递数据，注意的是监听的那些变量名不能采用驼峰形式-->
   <myComA :my-value="myVal" @from-child="fatherEvent">
     {{myVal}}
     <!--例子6通过slot来给子组件传递数据-->
     <p>这是来自父组件的内容</p>
     <p>这是通过slot来插入子组件</p>
     <!--例子7具名插槽slot-->
     <p slot="header">这是通过具名插槽实现的头部信息</p>
     <p slot="footer">这是通过具名插槽实现的底部信息</p>
   </myComA>
   <!--例子2-->
   <!--这里动态绑定子组件老是报错，暂时不清楚问题 -->
   <!--<p :is="comToRender"></p>-->
 </div>
</template>
<script>
//  例子3
  //这里需要注意路径的写法，components前要加上./,不然会一直报错说模板找不到
  import comC from './components/c.vue'
  import comA from './components/a.vue'
//  import comD from './components/d.vue'
  export default{
    data(){
      return {
        comToRender:'com-d',
        myVal:0
      }
    },
    components:{
      mycomponentC:comC,
      myComA:comA

    },
    methods:{
      fatherEvent(val){
        alert('emit by child'+val);
      }
    }

  }
</script>

a.vue文件：

<template>
  <div>
    <!--插槽里的内容如果父组件没有给子组件传递内容，将作为默认值显示-->
    <slot>no slot</slot>
    <slot name="header">no header</slot>
    <slot name="footer">no footer</slot>
    {{hello}}-{{myValue}}
    <button @click="childEvent">按钮</button>
  </div>
</template>
<script>
  export default{
//    props:[
////      这里刚刚一直报错，因为要传入的值是myValue而不是myVal
//      'myValue'
//    ],
    props:{
      'myValue':[Number]
    },
    data(){
      return{
        hello:'I am componentA'
      }
    },
    methods:{
      childEvent(){
        this.$emit('from-child','come from child');
      }
    }
  }
</script>

c.vue文件：

<template>
  <div>
    {{msg}}-{{number}}
  </div>
</template>
<script>
  import Vue from 'vue'
  export default{
//    props可以是数组也可以是对象
//    数组的形式
//    props:[
//      'number'
//    ],
//    对象的形式
    props:{
      //通过以下形式指定传入的number类型
      'number':[Number,String]
    },
    data(){
      return{
        msg:'i am component c'
      }
    }
  }
</script>

d.vue文件：

<template>
  <div>
    {{msg}}
  </div>
</template>
<script>
  import Vue from 'vue'
  export default{
    data(){
      return {
        msg:'我是comD中的信息'
      }
    }
  }
</script>

主要学习：

vue电商实战笔记（第四章）

猜你喜欢