怎么让data里面的字段和props的属性同步？

在data这边配置的id和label怎么渲染到标签上呢

Vue.extend({
  props: ['id'],
  watch: {
    id (value) {
      // 将 value 赋给 data
    }
  }
})

直接贴代码了
我vue也是初学，请指教

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>playground</title>
</head>
<body>
    <div id="app">
        //在html中定义子组件。 v-bind的缩写语法，将父组件的'id'绑定到子组件里的'id'上。 这里是单向绑定， 如需双向绑定， 可以使用.sync字面量。 具体请参见文档。 
        <ui-button :id="id" :label="label"></ui-button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: function() {
                return{
                    //定义父组件中的数据
                    message: '1211', 
                    id:'buttonId', 
                    label:'buttonLabel'
                  }
              }, 
              components: {
                  //定义子组件
                  'ui-button':{
                      //期待从父组件中传来的数据
                      props: ['id', 'label'], 
                      template: '<button type="button" v-bind:id="id" v-text="label"></button>'
                  }
              }
        })
    </script>
</body>
</html>

...

props的语法好像不是这样的吧
应该在子组件的extend内以数组的形式指定期望从父组件传来的数据/方法

Vue.component('child', {
  // 声明 props
  props: ['msg'],
  // prop 可以用在模板内
  // 可以用 `this.msg` 设置
  template: '<span>{{ msg }}</span>'
})

然后在父组件里显式传入要传递下去的数据/方法

<child v-bind:msg="parentMsg"></child>

可以看看vue.js的文档
https://cn.vuejs.org/guide/co...

麻烦一点就是，在method中，使用到数据时再进行赋值构建

【热门文章】