使用props传递数据

• props是组件的一个属性 属性值加双引号

• 组件通过props属性向外部传值

• props down, event up

语法

// html
<my-component val='首页'></my-component>

// js
Vue.component('my-component',{
    template:'<div>html结构</div>',
    props:['val']
})

基本用法

<div id="app">
    <child message="hello!"></child>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>

案例1 父组件将数据动态传给子组件

• 用 v-bind 动态绑定 props 的值到父组件的数据中
• 每当父组件的数据变化时, 该变化也会传导给子组件

<div id="app">
    <div>
      <input v-model="parentMsg">
      <child v-bind:message="parentMsg"></child>
    </div>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

var vm = new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

案例2 自定义todolist组件

• v-bind 指令将 todo 传到每一个重复的组件中

<div id="app">
    <ol>
    <todo-list v-for="item in tasks" v-bind:todo="item"></todo-list>
      </ol>
</div>

<script>
// 注册组件
Vue.component("todo-list", {
  props: ["todo"],
  template: "<li>{{ todo.text }}</li>"
});

var vm = new Vue({
  el: "#app",
  data: {
    tasks: [
      { text: "吃饭", pro: 0, completed: false },
      { text: "睡觉", pro: 0, completed: false },
      { text: "打豆豆", pro: 0, completed: false }
    ]
  }
});
</script>

使用总结:

• 如果props中的值使用驼峰命名法命名，在html结构中需将其转化为用 " - " 链接;

• 通过props得到的变量不能进行修改