0521

vue中父子组件传值的问题，

一：父组件传值给子组件

首先在父组件中引用子组件，需要用 v-bind 动态绑定一个子组件接受的值，然后在 子组件中 props 声明改值。

声明一个子组件，其需要接受的数据是  'todo'

Vue.component('todo-item', {
     // todo-item 组件现在接受一个
     // "prop"，类似于一个自定义特性。 
    // 这个 prop 名为 todo。 
       props: ['todo'], 
       template: '<li>{{ todo.text }}</li>'
 })

　　父组件要将'todo'的值传给子组件

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"                                 //需要传给子组件的值
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
var app7 = new Vue({ 
    el: '#app-7',
    data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其它什么人吃的东西' } ] }
})

　　

 

二：Vue中$set 方法

用来对data对象进行新增，修改值，触发试图更新

 

三：监听子组件事件，子组件传值给父组件

 

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

 

　　 子组件利用$emit来进行通信，$emit告诉父组件，你可以通过这个来监视我

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

　　父组件用 v-on:enlarge-text 来监听子组件发生改变

 

 

 

 

四：JS中的事件：

点击事件

var btn =document.getElementById('myBtn');

1. btn.onclick() ;

2. btn.addEventListenner('event.type',function a(){} , flase)   添加事件监听     flase 表示事件会在冒泡阶段被触发    （可以为一个事件绑定多个事件处理函数）

    btn.removeEventListenner('event.type',function a(){} , flase) 移除事件监听

3.IE中的点击事件： btn.attachEvent('onclick',function a(){})    添加事件监听                      btn.detachEvent('onclick',function a(){})    添加事件监听

 

 

event.preventDefault()    阻止默认事件