vue组件使用方法

创建实例化Vue对象

第一部分代码段

<div id="vue-app-one">
        这里是：{{name}}
    </div>
    <div id="vue-app-two">
        这里是：{{name}}
        //创建按钮事件 当执行按钮事件时，改变第一个{{name}}中的值
        按钮事件：<button v-on:click="changeName">change-one</button>
    </div>

第二部分代码段

<script>
    var one=new Vue({
        el:'#vue-app-one',
        data:{
        //第一个{{name}}中的值
            'name':'蔡志强'
        }
    })
    var two =new Vue({
        el:'#vue-app-two',
        data:{
        //第二个{{name}}中的值
            'name':'蔡志强'
        },
        //方法事件
        methods:{
        //执行changName事件后，将'vue-app-one'中的{{name}}值修改为'若离'
            changeName:function () {
                one.name='若离'
            }
        }
    })
</script>

运行结果：

全局组件

定义和使用

1.定义全局组件，需给组件一个名字，调用时，将组件名当作标签名使用；相当于自定义标签，该标签下可以包含很多子html标签；
2.这些子html标签定义在组件的template属性中，每次调用该组件，都渲染template里的标签
3.template里必须只有一个根元素
4.在组件中，data是函数，将数据return回去
5.依然可以用this来调用data中定义的数据

定义组件

① 定义一个组件，命名为my-component
② 其中包含数据：name和方法：changeName
③ 渲染出的html效果有一个p标签，包含一个按钮，点击按钮时，修改name
④ 命名规范：camelCase (驼峰命名法) 与kebab-case (短横线分隔命名)

当写成标签时，遇到有大写字母的命名，需要改成小写并用横杆链接前后两个部分，如定义组件时命名为myComponent，写成标签时应写成；
组件定义时也可以用横杆法命名；
如果定义时用myComponent，标签用是OK的，系统自动识别

<div id="vue-app-one">
  <my-component></my-component>
</div>
<div id="vue-app-two">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component',{
    template:'<p>我的名字：{{name}} <button v-on:click="changeName">click</button> </p>',
    data(){
      return {
        //默认字符
        'name':'若离'
      }
    },
    methods:{
      //按钮事件
      changeName:function () {
        this.name='蔡志强'
      }
    }
  })
  new Vue({
    el:'#vue-app-one'
  })
  new Vue({
    el:'#vue-app-two'
  })
</script>

运行结果：

局部组件

定义和使用

私有组件的使用

// 注册私有组件
components:{
	my-component1
}

定义组件

1.局部组件注册在某个vue对象中
2.只有注册过该局部组件的vue对象才能使用这个局部组件

<div id="vue-app-one">
    喜欢的食物:
    <msg-component></msg-component>
</div>

<script>
// 局部组件
    var msgComponent = {
        template: '<ul>' +
            '<li v-for="food in foods" v-bind:key="food.id">{{food}}</li>' +
            '</ul>',
        data() {
            return {
                foods: ['苹果', '草莓', '香蕉']
            }
        }
    }
    new Vue({
        el: '#vue-app-one',
        components: {
        //引用
          msgComponent
        }
    })
</script>

运行结果：

通过 Prop 向子组件传递数据

静态传值

<div id="vue-app-one">
    <!--在父组件上使用子组件-->
    <title-component school="长江大学文理学院" name="蔡志强"></title-component>
</div>

<script>
    //创建子组件
    var titleComponent = {
        props: ['school', 'name'],
        template: '<p>{{school}} {{name}}</p>'
        //所需要的数据title有父组件提供
    }
    Vue.component('', {})
    //在父组件中注册components属性中注册子组件
    new Vue({
        el: '#vue-app-one',
        components: {
            titleComponent
        }
    })
</script>

运行结果：

v-bind 动态传值

<div id="vue-app-one">
	//v-bind:myName='my_name' 前面是子组件的 后面是父组件的
    <title-component v-bind:my-name="my_name"></title-component>
</div>

<script>
  var titleComponent={
    props:['myName'],
    template:'<p>{{myName}}</p>'
  }
  new Vue({
    el:'#vue-app-one',
    components:{
      titleComponent
    },
    data(){
      return{
        'my_name':'我的名字'
      }
    }
  })
</script>

运行结果：

传递复杂数据

<div id="vue-app-one">
    <msg-component v-for="food in foods" 
    			   v-bind:food="food" v-bind:key="food.id"></msg-component>
</div>

<script>
    //子组件
    var msgComponent = {
        props: ['food'],
        template: '<p>{{food}}</p>',
    }
    //父组件
    new Vue({
        el: '#vue-app-one',
        components: {
            msgComponent
        },
        data: {
            foods: ['苹果', '香蕉', '草莓']
        }
    })
</script>

运行结果：

子组件向父组件传值

事件传值$emit

子组件不能通过prop向父组件传递数据，需要使用事件向父组件抛出一个值，告知父组件我需要实现一个功能，由父组件处理这个事件

 <div id="vue-app-one">
      <msg v-bind:my_name="my_name" v-on:change_name="changeName"></msg>
  </div>

<script>
  //子组件
  Vue.component('msg',{
      props:['my_name'],
      template:'<div>' +
          '<h3>{{my_name}}</h3>' +
          '<button @click="$emit(\'change_name\',\'若离\')">修改名字</button>' +
          '</div>',
  })
  //父组件
  new Vue({
      el:'#vue-app-one',
      data:{
      	 //默认值
          my_name: '蔡志强'
      },
      methods:{
      //接收按钮事件的值 '若离' 当出发点击事件时候改变原来的值
          changeName:function (value) {
              this.my_name=value
          }
      }
  })
</script>

运行结果：