The components and communication components Vue

Components of the global components

//注意：需要在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:{}
})

Local assembly of components

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

Component parent element of the value passed to the communication sub-assembly

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

A total of three steps:

1. On the custom label subassembly disposed custom property value of a parent component required value passed from the (variable)
2. Set a property called props on instances subassembly for receiving the value of the parent element passed over, an array of strings option props

3. Because props option is also an example vue agent, so use this directly in the sub-components in the current instance. Custom property name can be used

    <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>

The sub-assembly is transmitted to the communication component parent component

A total of five steps:

1. Set a click event on the component sub-assembly of the template used to trigger custom events for traditional values
2. Set the click event in the methods subassembly event handler: content to perform a custom event this $ emit ( "custom event name", several parameters).
3. In view of the management of the parent component, which is the place to write a custom label sub-assembly, set up a custom monitor events on the label (with v-on instruction on the line)
4. A container defined in advance in a data object in the data receiving parent element subassembly passed over the value of

5. Set custom event listener in the methods of the parent component of the event handler: Because the event is triggered, there will be written a number of parameters passed over, so here handle it. The value passed to the receiving vessel just defined, then it can be assured that the value of the passed subassembly

     <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>