20190224-vue学习笔记5

20190224-vue学习笔记5

对数据的 push() 操作

先看个栗子：

 data(){	///声明
            return {              
                buycarlist:[],
                buycar:'',
            }
        },

methods: {
            addpushbuycar:function () {
                this.buycarlist.push(this.buycar);
                this.buycar='';

            },
            removed_buy:function () {
                //清空购物车，
                this.buycarlist=[];

            }
        },

 <div>
            <span>购物商品：</span><input type="text"  v-model="buycar" >
            <button v-on:click="addpushbuycar">添加到购物车</button>

            <ul>
                <li v-for="list in buycarlist ">{{list}}</li>
            </ul>
        </div>

效果如下：

this.buycarlist.push(this.buycar);， 将变量buycar变化后的值，附在数组上，最后，用v-for循环显示出来。

“父”与“子”之间的传递参数

props属性是父子组件之间的通信桥梁。
何为父子组件？从子组件的观点来看，他的上一级实例或组件即为他的父组件。
可以这样理解：
父：以下指的是views 中的vue，
子：以下指的是components中的vue，组件文件；

处于安全考虑，组件模板里我们无法直接使用父组件的data数据，使用props这个属性可以将父组件的数据传给子组件。

父组件->子组件：props
子组件->父组件：触发事件

父向子传参prop

父组件的数据需要通过 prop 才能下发到子组件中。
prop一般用于父组件向子组件进行单向通信（父向子传值），传递的可以是字符串、也可以是表达式、也可以是一个对象，也可以是一个数组，甚至是一个布尔值。

也就是props是子组件访问父组件数据的唯一接口。
看以下案例，

//父组件 home.vue
写法：

`:father_msg="msg"  //传入的变量名（传给儿子的）=“变量”，这里的变量在父组件的data()中声明的。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="传第1个参数： Welcome to XXX Vue.js Apptest" msg11="传第2个参数：123456"/>
    <MyComptsTest :father_msg="msg" :father_msgExp="msgExpA+msgExpB" :father_arrray="msgArray" ></MyComptsTest>
  </div>
</template>

export default {
  name: 'home',
  components: {
      //调用HelloWorld.vue的组件
    HelloWorld,
    MyComptsTest
  },
    data(){
      return {
          msg:'我是父组件向子组件传递的值',
          msgExpA:'props也可以是一个表达式：表达式A',
          msgExpB:'，表达式B',

          msgArray:[
              {
                  id:1,
                  msg:'props也可以是一个数组',
              },
              {
                  id:2,
                  msg:'用v-for进行循环渲染',
              },
          ],
      }
    }
}
</script>

//子组件 MyComptsTest.vue

<div>
            <h1>{{ father_msg }}</h1>
            <h3>{{father_msgExp}}</h3>
            <ul>
                <li v-for='item in father_arrray' :key='item.id' >
                    <h4>{{item.msg}}</h4>
                </li>
            </ul>
        </div>

data(){
      return {
       props:[		//接收父组件传入的变量
            'father_msg',    //单引号，双引号都可以
            "father_msgExp",
            "father_arrray",
        ],
      }
}

效果如下：

除了传递变量，也可以传递方法、函数，
上面例子，改进下，

//父组件

methods: {
        click_button:function () {
            alert("这是传递给子组件的单击事件："+this.msg);
            console.log('父组件显示的内容！');
        }
    },

 <MyComptsTest :father_msg="msg" :clickevent="click_button"  ></MyComptsTest>

//子组件

props:[
            'father_msg',    //单引号，双引号都可以
//            "father_msgExp",  //不屏蔽也不会报错
//            "father_arrray",
            "clickevent",   //单击事件
        ],

<button @click="clickevent">单击事件</button>

效果如下：

子向父的数据进行处理

父组件的数据通过props传入子组件以后，在子组件中也可对数据进行相关处理，包括计算属性、data属性等。这样当子组件需要对数据进行处理时，避免了直接在父组件中对数据进行操作，而且由于props数据流单向性，在子组件中更改数据时，不会对父组件的数据产生影响。

子向父的数据进行处理，其实可以理解为，父提供方法/函数，让子来调用，修改父组件的变量/值，也就是说，如果父组件没有提供这些方法/函数，子组件是无法修改父组件的变量/值。
呈上代码：

//父组件

data(){
      return {
        msg_number:100,
      }
}

methods: {
       addnumber:function () {
                console.log('前 父组件+1:'+this.msg_number);
            this.msg_number= this.msg_number+1;
                console.log('后 父组件+1:'+this.msg_number);
        },
        reducenumber:function () {
                console.log('前 父组件-1:'+this.msg_number);
            this.msg_number= this.msg_number-1;
                console.log('后 父组件-1:'+this.msg_number);
        }
       
    },

这里传递的时候，要用 @father_add_number 写法

<MyComptsTest  :father_number="msg_number" @father_add_number="addnumber" @father_reduce_num="reducenumber"   ></MyComptsTest>

///子组件

第一步：先接收父组件的变量/方法

props:[
//单引号，双引号都可以
            "father_number",
            "father_add_number",
            'father_reduce_num',
        ],

第二步：在methods关联上父组件的方法，$emit就是关联父组件方法，如果不写上关联方法，是不会起作用的

 methods: {
            son_add:function () {
                    console.log('前 子+1:'+this.father_number);
                this.$emit('father_add_number');    //$emit这是关联父组件传给的方法father_add_number
                    console.log('后 子+1:'+this.father_number);
            },
            son_reduce:function () {
                    console.log('前 子-1:'+this.father_number);
                this.$emit('father_reduce_num');   //$emit这是关联父组件传给的方法father_reduce_num
                    console.log('后 子+1:'+this.father_number);
            },
        },

第三步：调用在methods声明的方法

			<div >计算的父变量：{{ father_number }}</div>
            <button @click="son_add">加法：+1</button>
            <button @click="son_reduce">减法：-1</button>

效果如下：

点击 加+1：

点击 减-1：

在调用父组件的方法，在事件的前后都分别加上console.log，来监控，父组件传递的参数“msg_number”的值，结果如下：

结果发现了，在页面前端，父组件的参数“msg_number”，是98，而在后台，子组件获得这个变量的值，依然是“100”。
也就是说，子组件通过父组件的方法，即使是修改了父的变量，子组件后台要通过下次触发才能重新获取到变量。