Vue之组件及组件通信

组件之全局组件

//注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template:`组件模板` })
Vue.component("show-name",{
    template:`
    <div title="注意, 组件模板的根元素必须有且只有一个">
    <p>ViavaCos</p>
    </div>
    `
})

var vm = new Vue({
    el:'#app',
    data:{
        name:'ViavaCos'
    },
    methods:{}
})

组件之局部组件

// 套路和全局组件一样,这两者只是注册的位置不同,作用的范围也不一样罢了 使用components选项来注册局部
var vm = new Vue({
    el:'#app',
    data:{},
    components:{
        'show-name':{
            template:`
            <div title="注意, 组件模板的根元素必须有且只有一个">
                <p>ViavaCos</p>
            </div>
        `
        }
    }
})

组件通信之父组件传递值给子组件

// 父组件传递值给子组件通过自定义属性传递,然后子组件通过porps选项来接收所传递过来的值

一共三个步骤:

  1. 在子组件的自定义标签上设置自定义属性,值为父组件需要从传递的值(变量)
  2. 在子组件的实例上设置一个叫props的属性,用来接收父组件传递过来的值,props选项是一个字符串数组
  3. 由于props选项也被vue实例代理了,所以直接在当前子组件实例中使用this.自定义属性名就可使用了

     <div id="app">
         // 1. 设置自定义属性
         <show-city :city="city"></show-city>
     </div>
     <script src="./vue.js"></script>
     <script>
         var vm = new Vue({
             el: '#app',
             data: {
                 city: ["北京", "上海", "天津"]
             },
             methods: {},
             components: {
                 'show-city': {
                     // 3.使用
                     template: `
                     <div>
                         <p v-for="item in city">{{item}}</p>
                     </div>
                     `,
                     // 2.接收值
                     props: ['city']
                 }
             }
         });
     </script>

组件通信之子组件传递给父组件

一共五个步骤:

  1. 在子组件的组件模板上设置一个点击事件,用来触发自定义事件用于传值
  2. 在子组件的methods中设置点击事件的事件处理程序:内容为执行自定义事件this.$emit("自定义事件名", 若干个参数)
  3. 在父组件管理的视图,也就是书写子组件的自定义标签的地方,在这个标签上设置自定义事件的监听(用v-on指令就行)
  4. 提前在父组件的数据对象data中定义一个容器来接收子组件传递过来的值
  5. 在父组件的methods中设置监听自定义事件的事件处理程序:由于事件触发了,会有写好的若干个参数传递过来,所以在这里处理一下。将传递来的值用方才定义好的容器接收,然后就可以放心使用这个子组件传递来的值了

      <div id="app">
             <!-- 3. 监听事件 -->
             <show-city @getcity='exeCity' v-for="item in city" :city="item" :tcity="tcity"></show-city>
         </div>
    
    
     <script src="./vue.js"></script>
     <script>
         var vm = new Vue({
             el: '#app',
             data: {
                 city: ["北京", "上海", "天津"],
                 // 4. 定义容器接收
                 tcity: ''
             },
             methods: {
                 // 5. 赋值给tcity这个容器
                 exeCity(data) {
                     this.tcity = data;
                 }
             },
             components: {
                 'show-city': {
                     // 1. 设置自定义事件
                     template: `
                     <div>
                         <p @click="toFather" :class="{select:isSelect}" >{{city}}</p>
                         <input text="text" v-model="isSelect">
                     </div>
                     `,
                     props: ['city', 'tcity'],
                     methods: {
                         toFather() {
                             // 2. 触发自定义事件
                             console.log('被点击了')
                             this.$emit('getcity', this.city);
                         },
                     },
                     computed: {
                         isSelect() {
                             return this.city === this.tcity;
                         }
                     }
                 }
    
             }
         });
     </script>
posted @ 2019-10-21 11:08  R_Javac  阅读(...)  评论(...编辑  收藏
Live2D
干嘛呢你,快把手拿开