当前位置： 移动技术网 > IT编程>网页制作>Html5 > Vue 组件

Vue 组件

2018年06月27日  | 移动技术网IT编程  | 我要评论

杨永信为什么没被判刑,韩影阁,遗爱千年之夕女心

定义组件名的方式有两种：

使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，
你也必须在引用这个自定义元素时使用 kebab-case，
例如
<my-component-name>

使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (驼峰式命名) 定义一个组件时，
你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

传值&传引用：

传值：String Number Boolean

传引用：Array Object 

(如果传的是引用，改变一个地方的数据，所有跟引用相关的数据都会发生变化。如果传的是值，则不会。)

父组件向子组件传值：

    在组件上绑定属性：v-bind:property="value" ，
    其中property为绑定的属性名，value为需要传的值(父组件数据中的属性名)
    在子组件里用props:["property"] 接收父组件传的值，其中property为组件上绑定的属性名
    
示例：

父组件：
data(){
    return {
        test: [{
            name:  "Amor",
            sex: "man",
            age: 18
        }]
    };
}
组件(组件名为child)：
<child v-bind:users="test"></child>
        
子组件接收值：

props:["users"]
或
props: {
    users: {
        type: Array,
        required:true
    }
}

子组件向父组件传值：

子组件注册事件：
this.$emit(事件名, value);
父组件监听事件：
　　组件上：
　　　　v-on:事件名="自定义方法名($event)"，
　　　　其中$event接收子组件传过来的值，此参数必须为$event
        
示例：

①脚手架

子组件：
methods: {
    send(){
        this.$emit(change, "我是传递的值！");
    }
}
组件(组件名为child)：
<child v-on:change="receive($event)"></child>
父组件：
methods:{
　　receive(data){
　　　　console.log(data); // "我是传递的值！"
　　}
}

组件注册&引用：

全局注册:

Vue.component('my-component-name', {
　　// ... 选项 ...
})

局部注册:
new Vue({
　　el: '#app'
　　components: {
　　　　'component-a': ComponentA,
　　　　'component-b': ComponentB
　　}
})

①脚手架：

import 自定义组件名1 from '组件1路径';
import 自定义组件名2 from '组件2路径';

父组件：

components: {
　　自定义组件名1,
　　自定义组件名2
}

脚本:

# 注意：
    data
    类型：Object | Function
    限制：组件的定义只接受 function

实例：

# test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="test.js"></script>
</head>
<body>
    <div id="test">
        <test v-bind:title="title" v-on:from_child="getValue($event)"></test>
    </div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data(){
            return {
                title: "This is Vue.js!"
            };
        },
        methods:{
            getValue:(data)=>{
                console.log(data);
            }
        }
    });
</script>

#test.js

Vue.component("test",{
    template: ` <div>
                    <p>Hello,world!</p><p>{{test}}</p>
                    <p>{{title}}</p>
                    <button @click="to_parent()">子向父传值</button>
                </div>`,
    props:["title"],
    data(){
        return {
            test: "Vue.js!"
          };
    },
    methods: {
        to_parent:function () {
            this.$emit('from_child',this.test);
        }
    }
});

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网