vue组件 is ref

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6         <style>
 7             .active {
 8                 color:red
 9             }
10         </style>
11     </head>
12     <body>
13         <div id="app">
14             <table>
15                 <tbody>
16                     <tr is="row"></tr>
17                     <tr is="row"></tr>
18                     <tr is="row"></tr>
19                 </tbody>
20             </table>
21         </div>
22         
23         
24         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
25         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
26         <script>
27             Vue.component('row',{
28                 template: '<tr><td>this is row</td></tr>'
29             })
30             var app = new Vue({
31                 el: '#app'
32             })
33         </script>
34     </body>
35 </html>

注意：table 里面只能写tr>td, 使用is=row,若直接使用<row></row>则template模板不在table里面。其它select ,ul, ol等都是用is

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <style>
            .active {
                color:red
            }
        </style>
    </head>
    <body>
        <div id="app">
            <table>
                <tbody>
                    <tr is="row"></tr>
                    <tr is="row"></tr>
                    <tr is="row"></tr>
                </tbody>
            </table>
        </div>        
        
        <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            Vue.component('row',{
                data: function() {//子组件里的data是function而不是object, 且使用return
                    return {
                        content: 'this is row'
                    }                    
                },
                template: '<tr><td>{{content}}</td></tr>'
            })
            var app = new Vue({
                el: '#app'
            })
        </script>
    </body>
</html>

/子组件里的data是function而不是object, 且使用return

让每一个子组件都拥有一个独立的数据存储，不会出现多个子组件之间互相影响的情况

ref

vue一般不操作dom节点，但如果要操作的话可以用ref

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6         <style>
 7             .active {
 8                 color:red
 9             }
10         </style>
11     </head>
12     <body>
13         <div id="app">
14             <div ref="hello" @click="handleDivClick">Hello World</div>
15         </div>        
16         
17         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
18         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
19         <script>
20             
21             var app = new Vue({
22                 el: '#app',
23                 methods: {
24                     handleDivClick: function() {
25                         console.log(this.$refs.hello);
26                         console.log(this.$refs.hello.innerHTML);
27                     }
28                 }
29             })
30         </script>
31     </body>
32 </html>

用ref实现的子组件相加得到父组件的total值

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6         <style>
 7             .active {
 8                 color:red
 9             }
10         </style>
11     </head>
12     <body>
13         <div id="app">
14             <counter ref="one" @change="handleChange"></counter>
15             <counter ref="two" @change="handleChange"></counter>
16             <div>{{total}}</div>
17         </div>        
18         
19         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
20         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
21         <script>
22             Vue.component('counter' , {
23                 data: function() {
24                     return {
25                         num: 0
26                     }
27                 },
28                 template: '<div @click="handleDivClick">{{num}}</div>',
29                 methods: {
30                     handleDivClick: function() {
31                         this.num++;    
32                         this.$emit('change');
33                     }
34                 }                
35             })
36             var app = new Vue({
37                 el: '#app',
38                 data: {
39                     total:0                    
40                 },
41                 methods: {
42                     handleChange: function() {
43                         console.log(this.$refs.one);
44                         console.log(this.$refs.two);
45                         return this.total = this.$refs.one.num + this.$refs.two.num;
46                     }
47                 }
48                 
49             })
50         </script>
51     </body>
52 </html>

猜你喜欢