vue 父子组件属性传递

父子组件属性传递

 

注意：0、谁被引用，谁就算子组件

　　  1、属性命名最好完全小写，否则需要如下格式转换：myAttr == my-attr

          2、引入的vue组件后必须通过 components 注册才能使用

          3、属性的传递必须子组件 props 注册才能使用

          4、prop默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态，除非在父组件属性传递时加上 .sync 就可实现双向绑定，如 v-bind:myname.sync = "name"        

          5、赋值时，不可同名，譬如说:title = "title"、那么会报错(其中一方改为mytitle就可以了)。顺便一提，在<template>中不存在赋值字符串，必须在<script>中使用 data 绑定传递

神坑：想要传递属性，必须让子组件注册 props 才可以(废话)

子组件：mycomponent.vue：

<template>
    <table>
        <tr>
            <th colspan="3">子组件数据</td>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ myname }}</td>
            <td><input type="text" v-model="myname" /></td>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myage }}</td>
            <td><input type="text" v-model="myage" /></td>
        </tr>
    </table>
</template>


<script>
    export default {
        props: {
            myname : String,
            myage : String

        }
    }
</script>

父组件：App.vue

知识点：调用其他组件模块，需要先import(require)、然后在加入components的中 

补充：其实这里不写data也是可以的

 <template>
    <table>
        <tr>
            <th colspan="3">父组件数据</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{ name }}</td>
            <td><input type="text" v-model="name" /></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ age }}</td>
            <td><input type="text" v-model="age" /></td>
        </tr>
    </table>
    <mycomponent :myname.sync = "name" :myage = "age"></mycomponent>
</template>


<script>

import mycomponent from './components/mycomponent'

export default { 
   data () {
      return {
        name : "Lee",
        age : 18
      }
   },
   components : {
     mycomponent
   }
}
</script>

<style>
* {margin: 0; padding: 0; box-sizing: border-box } html {font-size: 12px; font-family: Ubuntu, simHei, sans-serif; font-weight: 400 } body {font-size: 1rem } table, td, th {border-collapse: collapse; border-spacing: 0 } table {width: 100% } td, th {border: 1px solid #bcbcbc; padding: 5px 10px } th {background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer } tr:nth-of-type(odd) {background: #fff } tr:nth-of-type(even) {background: #eee } fieldset {border: 1px solid #BCBCBC; padding: 15px; } input {outline: none } input[type=text] {border: 1px solid #ccc; padding: .5rem .3rem; } input[type=text]:focus {border-color: #42b983; } button {outline: none; padding: 5px 8px; color: #fff; border: 1px solid #BCBCBC; border-radius: 3px; background-color: #009A61; cursor: pointer; } button:hover{opacity: 0.8; } #app {margin: 0 auto; max-width: 640px } .form-group {margin: 10px; } .form-group > label {display: inline-block; width: 10rem; text-align: right; } .form-group > input, .form-group > select {display: inline-block; height: 2.5rem; line-height: 2.5rem; } .text-center{text-align: center; } .pagination {display: inline-block; padding-left: 0; margin: 21px 0; border-radius: 3px; } .pagination > li {display: inline; } .pagination > li > a {position: relative; float: left; padding: 6px 12px; line-height: 1.5; text-decoration: none; color: #009a61; background-color: #fff; border: 1px solid #ddd; margin-left: -1px; list-style: none; } .pagination > li > a:hover {background-color: #eee; } .pagination .active {color: #fff; background-color: #009a61; border-left: none; border-right: none; } .pagination .active:hover {background: #009a61; cursor: default; } .pagination > li:first-child > a .p {border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .pagination > li:last-child > a {border-bottom-right-radius: 3px; border-top-right-radius: 3px; }
</style>