7.1组件与复用
2019-03-02 本文已影响0人
咸鱼前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue组件与复用</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 1.组件的限制 -->
<!-- <table>
<tbody is="my-component"></tbody>
</table> -->
<!-- Vue组件在渲染的时候会受HTML的限制，例如table内规定只能是tr，td，所以在table内渲染组件是无效的，这时候可以用特殊的is来挂载组件。常见的限制元素还有<ul>、<ol><select> -->
<!-- 2.组件的data属性 -->
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<br>
<br>
<!-- JavaScript对象是引用关系，所以如果return的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步。这种结果不是我们想要的，所以每个组件的data是单独的 -->
<my-component2></my-component2>
<my-component2></my-component2>
<my-component2></my-component2>
<!--这样单独的将data独立出来，三个按钮就互不影响了，完全达到了复用的目的-->
</div>
<script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
/*Vue.component("my-component",{
template: "<h1>这是我创建的组件！</h1>"
})//全局组件*/
/*var Child = {
tepmplate: "这是我创建的组件！"
}//局部组件*/
//引用外部data对象
var data = {
counter: 0
};
var Child = {
template: "<button @click='counter++'>{{ counter }}</button>",
data: function () {
return data;
}
}
//独立data对象
var Child2 = {
template: "<button @click='counter++'>{{ counter }}</button>",
data: function () {
return {
counter: 0
}
}
}
var vm = new Vue({
el: "#app",
components: {
"my-component": Child,
"my-component2": Child2
}
})
</script>
</body>
</html>
