Vue-组件注册

　　Vue_组件及其注册：

基本示例

这里有一个 Vue 组件的示例：

<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
​
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

 

这个例子中是 。我们可以在一个通过new Vue` 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

You clicked me 0 times.

 

注意： 取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝： 如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例

 

二：组件之间的传递数据：

        <div id="app">
            <ul>
                <product-com v-for="item in proList" :product="item"></product-com>
​
            </ul>
        </div>
        <script type="text/javascript">
            //注意：template直接引入html内容需要`innerHTML`
            Vue.component("product-com",{
                props:['product'],
                template:`              <li>
                    <h3>产品名称：{{product.title}}</h3>
                    <h4>产品描述：{{product.brief}}</h4>
                    <p>产品价格：{{product.price}}</p>
                </li>`,
                data:function(){
                    return {
                        
                    }
                }
            })
            //跟组件
            let app=new Vue({
                el:"#app",
                data:{
                    proList:[
                        {
                            title:"产品1",
                            price:"10",
                            brief:"产品描述"
                        },
                        {
                            title:"产品2",
                            price:"10",
                            brief:"产品描述"
                        },
                        {
                            title:"产品3",
                            price:"10",
                            brief:"产品描述"
                        }
                    ]
                }
            })
        </script>

 

 

三：动态prop：

类似于v-bind绑定HTML特性

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>