vue组件使用细节

ref

当ref写在一个标签元素中，通过this.$refs.name 获取的是标签对应的dom元素

<section id="app"
         ref="froggy"
         @click="handleClick"
>{{name}}</section>

<script>
    var vm = new Vue({
        el: "#app",
        data:{
            name:"emit"
        },
        methods:{
            handleClick: function() {
                console.log(this.$refs.froggy)
                alert("this.$refs.froggy")
            }
        }
    })
</script>

当ref写在一个组件上的时候。获取的是一个子组件的引用

<section id="app"
         ref="froggy"
         @click="handleClick"
>
    <counter ref="one"></counter>
    <counter ref="two"></counter>
    {{name}}</section>



<script>

    Vue.component("counter", {
        template:"<div @click='handleClick'>{{number}}</div>>",
        data:function() {
            return {
                number: 0
            }
        },
        methods: {
            handleClick: function() {
                this.number++
            }
        }
    })

    var vm = new Vue({
        el: "#app",
        data:{
            name:"0"
        },
        methods:{
            handleClick: function() {
                this.name = this.$refs.one.number + this.$refs.two.number
            }
        }
    })
</script>

is = " 子组件名称"(属性)

H5有一些编码规范

<ul> --<li>

<ol> --<li>

<select> --<option>

<table> --<tbody> -- <tr> --<td>

非子组件中定义data要用function + return

子组件不像根组件只调用一次，子组件会被不断调用，不希望子组件中数据冲突

每个子组件都有独立的数据存储，多个子组件间互相影响