1. 注册组件
1.1 创建实例时注册
语法示例
- 在实例中注册组件
components: {
tagName: {options,},
}
tagName 为组件名，options 为配置选项。
- 调用组件
<tagName></tagName>
示例
<div id="app">
<shu></shu>
</div>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<shu></shu>
</div>
<script>
new Vue({
el: "#app",
components: {
shu: {
template: "<h1>自定义组件!</h1>",
},
},
});
</script>
</body>
</html>
1.2 在实例外注册组件
语法示例
- 注册组件
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<shu></shu>
</div>
<script>
Vue.component("shu", {
template: "<h1>自定义组件!</h1>",
});
new Vue({
el: "#app",
});
</script>
</body>
</html>
1.3 在变量中定义组件选项
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<shu></shu>
</div>
<script>
var Child = {
template: "<h1>自定义组件</h1>",
};
new Vue({
el: "#app",
components: {
shu: Child
},
});
</script>
</body>
</html>
2. 接收父组件传来属性（Prop）
子组件用它来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"
2.1 基本使用
语法示例
props: ["message"],
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<shu message="hello"></shu>
</div>
<script>
Vue.component("shu", {
propes: ["message"],
template: "<h1>{{message}}</h1>",
});
new Vue({
el: "#app",
});
</script>
</body>
</html>
2.2 动态绑定
用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model="name">
<br>
<shu v-bind:message="name"></shu>
</div>
</div>
<script>
Vue.component('shu', {
props: ['message'],
template: '<span>{{ message }}</span>'
})
new Vue({
el: '#app',
data: {
name: '关羽'
}
})
</script>
</body>
</html>
- 结果显示
2.3 绑定列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.name }}</li>'
})
new Vue({
el: '#app',
data: {
sites: [
{ name: '刘备' },
{ name: '关羽' },
{ name: '张飞' }
]
}
})
</script>
</body>
</html>
image.png
网友评论