vue-day05第五天

vue-day05

 

1.组件传值

 

1.父传子

 

//这是父组件
 <p>這是父組件的数据:{{msg}} {{json.name}}</p>
{{msg}}
<input type="text" v-model='msg'>

 

//这是子组件写法  通过prop接收 直接渲染到页面
  props:['a','b','msg','json'],

 

1.父变子变   子组件直接通过props接收即可
2.子变父不变 但是子报错  把父组件传递过来的值在自己的mounted中进行重新复制，再渲染到页面即可解决
3.父变子变 子变父变   父组件传递json对象给子组件，子组件通过props接收后直接渲染即可

2.父传子案例

 

1.拆分组件（需要确定哪些样式是固定的，哪些数据是活的）
2.父组件   a.需要引入对应子组件，把需要的所有数据放到父组件中，通过循环添加子组件的个数，需要拿到每一项数据
		  b.向子组件传值，渲染子组件样式，这个需要用到父子传值，子组件需要用props接收

父组件 java.vue:

 

<template>
<div>
    这是java讲师
    <v-card v-for='item in teachers'  :key='item.id' :teachers='item'></v-card>
     <!-- <v-card></v-card>
      <v-card></v-card> -->
</div>
</template>
<script>
import vCard from './card'
export default {
components:{
    vCard,
 },
data () {
 return {
     teachers:[
         {
             id:1,
             img:'http://www.ujiuye.com/uploadfile/2019/0109/20190109110959719.jpg',
             name:'张老师',
             job:'java'

         }, 
         {
             id:2,
             img:'http://www.ujiuye.com/uploadfile/2019/0109/20190109105513572.jpg',
             name:'李老师',
             job:'java'

         },
          {
             id:3,
             img:'http://www.ujiuye.com/uploadfile/2019/0109/20190109105409469.jpg',
             name:'杨老师',
             job:'java'

         },
          {
             id:4,
             img:'http://www.ujiuye.com/uploadfile/2019/0516/20190516093549100.jpg',
             name:'孙老师',
             job:'java'

         }
     ]
 }
},
}

子组件:card.vue

 

<div class="card">
   
     <img :src="teachers.img" alt="">
     <p >{{teachers.name}}</p>
     <p>{{teachers.job}}</p>
   
</div>
//js中：
  props:['teachers'],

 

2.使用jquery

1.安装 npm i jquery --save

2.在mian.js中导入同时配置原型，是$为全局对象

3.在需要文件中直接import $ from 'jquery'

4.直接使用jq的方法

 

3.is使用

1.解决标签的固定搭配问题

 

<ul>
      <!-- 1.可以替换标签的固定搭配 -->
      <li is='v-one'></li>
</ul>

2.动态组件

 

 <button @click="name='v-one'">one</button>
 <button @click="name='v-two'">two</button>

 <div :is='name'></div>


js:
 data() {
    return {
        name:'v-one'
    };
  },

 

4.子传父

 

5.slot插槽

可以展示组件标签内部的内容

 

//无名插槽  
<v-one>
我是从one过来的
</v-one> 

 

 <v-one>
      <div slot="one">
        <p>白日依山尽</p>
        <div>黄河入海流</div>
      </div>
       <h3 slot="one">我是标题</h3>
      <div slot="two">
        <p>欲穷千里目</p>
        <div>更上一层楼</div>
      </div>
    </v-one>

 

这是子组件中: 具名插槽
<slot name='one'></slot>
<h1>这是one</h1>
<slot name='two'></slot>

总结：如果使用具名插槽，所有内容均需要指定插槽名字，否则不展示 下列中的

我是后来的

不会展示

 

 

<v-one>
    <div slot="one">
        <p>白日依山尽</p>
        <div>黄河入海流</div>
    </div>
    <h3 slot="one">我是标题</h3>
    <div slot="two">
        <p>欲穷千里目</p>
        <div>更上一层楼</div>
    </div>
    <p>我是后来的</p>
</v-one>
<v-one>

 

6.非父子传值

1.首先在vue的原型上增加一个自定属性（Event）

2.如果a组件想要给b组件传值，那么需要用emit()绑定方法，在b中通过emit()绑定方法，在b中通过on() 就行

3.此种方法需要手动触发才能传值

 

  //这是a中
  send(){
        this.Event.$emit('sendA',this.data)
    }
    
  //这是b中
     mounted() {
    this.Event.$on("sendA", (e) => {
      console.log(e);
      this.amsg = e
    });
  },